जेएस: फॉर्मडाटा (jQuery अजाक्स)

Question

का उपयोग करके कई फाइलें कैसे भेजें, मेरे फॉर्म में एकाधिक फ़ाइल अपलोड हैं, FormData का उपयोग करके केवल एक फ़ाइल अपलोड हो रही है, हालांकि मैं अपलोड करने के लिए एक से अधिक फाइलों का चयन कर रहा हूं, कोड

है

एचटीएमएल

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

जे एस

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

मैं यू हूँ सर्वर पर PHP गाएं, HTML attribute name i, e photo का उपयोग करके मैं केवल फाइलों को सहेजने में सक्षम हूं, गतिशील फ़ाइल नाम मेरे लिए काम नहीं करेंगे।

Answer 1

आप जावास्क्रिप्ट में कोई त्रुटि है: आप एक इनपुट में फ़ाइलों पर केवल पुनरावृत्ति कर रहे हैं तो कृपया पर jsfiddle

Answer 2

उन जवाब काम नहीं करते इस

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

उदाहरण पर एक नजर है।

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

पिछले जवाब एक छोटे से त्रुटि है कि अगले कोड पर तय किया गया था, और करने वाला 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 

वैकल्पिक रूप से अभी आपको अपने 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

सामने अंत में

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

बैकएंड (NodeJS) पर

इस (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) 
     })