मैं जावास्क्रिप्ट और jQuery के लिए नया हूँ। फ़ॉर्म में N फ़ाइलों की संख्या अपलोड करते समय, केवल अंतिम फ़ाइल N बार अपलोड की जाती है,

मैं AJAX अनुरोध के माध्यम से प्रत्येक फ़ाइल को एक समय में (अतुल्यकालिक रूप से) अपलोड करना चाहता हूं।

नीचे मेरा कार्यान्वयन है:

$("#file-input").on("input", function() {

  var formdata = new FormData(document.getElementById("file-catcher"));
  

  $.each($("#file-input")[0].files, function (key, file){

      formdata.append(key, file);

      // This is to Inspecting each file 
      for(var pair of formdata.entries()) {
        console.log(pair[0]+ ': '+ pair[1]); 
      }

      // Sending AJAX 
      $.ajax({
            type: "POST",
            data: formdata,
            url: "/url/to/upload",
            datatype: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success:function(data){
              console.log(data); // Inspecting Response 
            },
            error: function (error) {
              console.log(error); // Inspecting Error if occured
            }
      });
  });

});
<form method="POST" id="file-catcher" action="/url/to/upload" enctype="multipart/form-data">

  <input type="text" name="fileCode" value="10">
  <input type="file" id="file-input" name="file-input" multiple>
  
</form>
1
Maqsud 24 पद 2020, 14:45
2
कि प्रत्येक लूप इन सभी अनुरोधों को मूल रूप से एक ही समय में प्रारंभ करेगा। मुझे पूरा यकीन है कि formdata में कुछ भी जोड़ने की जरूरत नहीं है; प्रारंभ में इसे सेट करने के बाद इसमें पहले से ही सबकुछ शामिल होना चाहिए।
 – 
Chris G
24 पद 2020, 14:52
2
सामान्य तौर पर, क्रम में कई async संचालन चलाने के लिए, आप या तो a) a लूप के लिए और await op के अंदर या b) एक कतार का निर्माण करते हैं और वर्तमान कतार समाप्त होने के बाद अगली कतार आइटम शुरू करते हैं।
 – 
Chris G
24 पद 2020, 14:54
@ChrisG, मैं बहुत आभारी रहूंगा। यदि आप लूप का उपयोग करने के लिए कुछ लेख के साथ मेरी मदद कर सकते हैं, तो कई async अनुरोध भेजने के लिए कतारबद्ध करें। या क्या आप मेरे कार्यान्वयन को सही कर सकते हैं?
 – 
Maqsud
24 पद 2020, 14:57
क्या मैं पूछ सकता हूं कि आप अलग-अलग फाइलें क्यों अपलोड करना चाहते हैं? इसके अलावा, क्षमा करें, लेकिन मैं निःशुल्क शिक्षण प्रदान नहीं कर सकता।
 – 
Chris G
24 पद 2020, 15:03
1
इससे मदद मिलनी चाहिए: stackoverflow.com/questions/24586110/…
 – 
Chris G
24 पद 2020, 15:08

1 उत्तर

सबसे बढ़िया उत्तर

मैं Chris G को एक कतार बनाने और फ़ाइलें भेजने के लिए प्रत्येक फ़ाइल के माध्यम से पुनरावृति करने के लिए मार्गदर्शन करने के लिए श्रेय देना चाहता हूं क्रम में।

const inputFile = document.getElementById('file-input');

// Iterating through each file and sending AJAX request
for (const file of inputFile.files){

  var formdata = new FormData(document.getElementById("file-catcher"));

  formdata.append("file-input", file);

  $.ajax({
        type: "POST",
        data: formdata,
        url: "/url/to/upload",
        datatype: 'JSON',
        contentType: false,
        cache: false,
        processData: false,
        success:function(data){
          console.log(data);
        },
        error: function (error) {
          console.log(error);
        }
  });

}
0
Maqsud 26 पद 2020, 13:46