JS: Come inviare più file utilizzando FormData (jQuery Ajax)

Question

Nella mia forma sono presenti più caricamenti di file, utilizzando FormData viene caricato solo un file, anche se sto selezionando più di un file da caricare, di seguito è il codice

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(); 
      } 
     } 
     }); 

sono u canta PHP sul server, usando HTML attribute name i, e photo solo io sono in grado di salvare i file, i nomi di file dinamici non funzioneranno per me.

Answer 1

si dispone di un errore di javascript: stai iterazione solo su file in un ingresso si prega di dare un'occhiata a questo

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); 
     }) 
}); 

esempio su jsfiddle

Answer 2

Queste risposte non funzionano.

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" /> 

La risposta precedente ha un piccolo errore che è stato fissato sul codice successivo, e andando lavora per inviare più file tramite la tecnologia 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 

opzionalmente solo per poter vedere il mio 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

di estremità anteriore

<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> 

ai back-end (nodejs) aggiungere questo (usando 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) 
     })