0
I am having problems in an upload system. The user can send up to 05 files, for this, I am doing so:
<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:
But when the user clicks Add more files in the field that was added, the name of the file that was added in the first field appears, that is, it replicates the file from the first field, but when selecting the file from the computer from the second field on, the file from the first field remains. Look at:
Jquery is that way:
<script type="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 to:
name="Arquivo[]"
I can’t add any more files in any field, nor in the first.
I reproduced here your code and everything works a perfection.
– Sam
Also reproduced.. I made a fiddle to test.. just to test I added a code to change the
name
of the inputs, but it was not necessary, theinput
comes without selected file, you can see here: https://jsfiddle.net/tseam915/– Ricardo Pontual
There must be some conflict that may be occurring in the project. I’ll take a look here. Thank you all.
– user24136