JS: Jak wysłać wiele plików za pomocą FormData (jQuery Ajax)

Question

W mojej postaci jest wiele plików do przesłania, używając FormData tylko jeden plik ładuje, ale wybieram więcej niż jeden plik do przesłania, poniżej jest kod

HTML

<form name="uploadImages" method="post" enctype="multipart/form-data"> 
<input type="file" name="photo[]" value=""> 
<input type="file" name="photo[]" value=""> 
<input type="file" name="photo[]" value=""> 
</form> 

JS

 var ajaxData = new FormData(); 
    ajaxData.append('action','uploadImages'); 
    jQuery.each($("input[name^='photo']")[0].files, function(i, file) { 
     ajaxData.append('photo['+i+']', file); 
     }); 
    $.ajax({ 
     url: URL, 
     data: ajaxData, 
     cache: false, 
     contentType: false, 
     processData: false, 
     type: 'POST', 
     dataType:'json', 
     success: function(data) { 
      if (data.status == 'success') { 
       location.reload(); 
      } 
     } 
     }); 

jestem u śpiewać PHP na serwerze, używając tylko HTML attribute name i, e photo tylko jestem w stanie zapisać pliki, nazwy dynamicznych plików nie będą działać dla mnie.

Answer 1

masz błąd w javascript: jesteś iteracji tylko na plikach w jednym wejściem proszę spojrzeć na ten

var ajaxData = new FormData(); 
ajaxData.append('action','uploadImages'); 
$.each($("input[type=file]"), function(i, obj) { 
     $.each(obj.files,function(j, file){ 
      ajaxData.append('photo['+j+']', file); 
     }) 
}); 

przykład na jsfiddle

Answer 2

odpowiedzi te nie działają.

var ajaxData = new FormData(); 
ajaxData.append('action','uploadImages'); 
$.each($("input[type=file]"), function(i, obj) { 
    $.each(obj.files,function(j,file){ 
     ajaxData.append('photo['+j+']', file);//i had to change "i" by "j" 
    }) 
}); 

Answer 3

<input type="file" name="Attachment[]" class="form-control TheFiles" /> 

poprzednią odpowiedź ma mały błąd, który został ustalony na następnej kodu i będzie działa wysyłanie wielu plików za pośrednictwem ajax:

var formData = new FormData(); 
     $.each($(".TheFiles"), function (i, obj) {     
      $.each(obj.files, function (j, file) {      
       formData.append('Attachment[' + i + ']', file); // is the var i against the var j, because the i is incremental the j is ever 0 
      }); 
     }); 
     formData.append('Destination', Destination); //add more variables that you need 
     formData.append('ReplyTo', ReplyTo);//add more variables that you need 
     formData.append('Body', Body);//add more variables that you need 

ewentualnie tylko można zobaczyć moje ajax config

$.ajax({ 
      url: 'YourUrl', 
      type: 'POST', 
      data: formData, 
      async: false, 
      success: function (data) { 
       location.reload(); 
      }, 
      complete: function() { 
       $(Here).text('Enviado com sucesso'); 
      }, 
      error: function (err) { 
       alert("Não deixe nenhum campo vazio"); 
      }, 
      cache: false, 
      contentType: false, 
      processData: false 
     }); 

Answer 4

w przedniej

<form name="uploadImages" method="post" enctype="multipart/form-data"> 
    <input type="file" name="photo[]" value=""/> 
    <input type="file" name="photo[]" value=""/> 
    <input type="file" name="photo[]" value=""/> 
    <button id="btn">btn</button> 
</form> 
     <script> 
      $(function(){ 
    var ajaxData = new FormData(); 
    ajaxData.append('action','uploadImages'); 
    $.each($("input[type=file]"), function(i, obj) { 
     $.each(obj.files,function(j, file){ 
      ajaxData.append('photo['+j+']', file); 
      $('#btn').on('click',function(){ 
     $.ajax({ 
     url:'https://stores-govan.c9users.io/test', 
      type:"POST", 
      data:ajaxData, 
      processData:false, 
      contentType:false, 
      success:function(){ 
      }, 
      crossDomain:true 
     }) 
     }) 

     }) 
    }); 

}) 
</script> 

w backend (nodejs) dodać (używając multer)

var multer=require('multer') 
app.post('/test',upload.array('photo[]',6),function(req ,res,next){ 
      var images=[] 
       if(req.files){ 
       for(var i=0;i<req.files.length;i++){ 
       images[i]=req.files[i].filename } 
       } 
       console.log(images) 
     })