File field does not add files when it has more than one field

Asked

Viewed 36 times

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:

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

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.

  • 2

    I reproduced here your code and everything works a perfection.

  • 1

    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, the input comes without selected file, you can see here: https://jsfiddle.net/tseam915/

  • There must be some conflict that may be occurring in the project. I’ll take a look here. Thank you all.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.