I'm having problems with an upload system. The user can send up to 05 files, for this, I'm doing it this way:
<table border="0">
<tr class='linhas'>
<td>
<div class="md-group-add-on">
<span class="md-add-on-file">
<button class="btn btn-primary waves-effect waves-light"><i class="fa fa-upload fa-lg"></i> Arquivo</button>
</span>
<div class="md-input-file">
<input type="file" name="Arquivo" class=""/>
<input type="text" class="md-form-control md-form-file">
<label class="md-label-file">Escolher Arquivo</label>
</div>
</div>
</td>
<td style="padding: 5px"><button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button></td>
</tr>
<tr><td colspan="3"><button type="button" class="adicionarCampo btn btn-success" title="Adicionar mais arquivos"><i class="fa fa-plus-square" aria-hidden="true"></i> Adicionar mais arquivos</button></td></tr>
</table>
As a result:
ButwhentheuserclicksAddmorefilesinthefieldthathasbeenadded,thefilenamethatwasaddedinthefirstfieldappears,ieitreplicatesthefilefromthefirstfield,butselectthefilefromthecomputerfromthesecondfieldon,remainsthefileofthefirstfield.See:
Jquerylookslikethis:
<scripttype="text/javascript">
$(function () {
function removeCampo() {
$(".removerCampo").unbind("click");
$(".removerCampo").bind("click", function () {
if($("tr.linhas").length > 1){
$(this).parent().parent().remove();
}
});
}
$(".adicionarCampo").click(function () {
if ($('.linhas').length < 5){
novoCampo = $("tr.linhas:first").clone();
novoCampo.find('input[type="file"]').val("");
novoCampo.insertAfter("tr.linhas:last");
removeCampo();
}else{
$(document).ready(function () {
$('#erro').modal('show');
});
}
});
});
</script>
Another problem is that if I put:
name="Arquivo"
It can still add in the first field, but if I rename it to:
name="Arquivo[]"
I can not add more files in any field, not the first.