javascript - सभी XHR2 के लिए प्रतीक्षा करने के लिए कैसे कॉल समाप्त करने के लिए भेजते हैं




jquery asynchronous (2)

मैंने कई फाइलें ब्राउज़र से सर्वर पर अपलोड करने के लिए कर दी हैं, जबकि प्रगतिबार को भी दिखाते हुए। XHR2 कॉल अतुल्यकालिक हैं समस्या यह है कि सभी XHR2 भेजने के कॉल समाप्त होने के बाद मैं कुछ फ़ंक्शन कॉल करना चाहता हूं।

यहां मेरे कोड का एक बहुत सरलीकृत स्निपेट है:

<input id="upload" multiple="multiple" />

<script>
var files = document.getElementById("upload").files;
for (var i = 0, length = files.length; i < length; i++) {
   var file = files[i];
   var uploadFunc = function (arg) {
      return function () {
         processXHR(arg);
      };
   }(file);      
   uploadFunc();
}

function processXHR(file) {
   var normalizedFileName = getNormalizedName(file.name);
   var url = 'upload_file/';
   var formData = new FormData();
   formData.append("docfile", file);
   var xhr = new XMLHttpRequest();
   var eventSource = xhr.upload;
   eventSource.addEventListener("progress", function (evt) {
      var position = evt.position || evt.loaded;
      var total = evt.totalSize || evt.total;
      console.log('progress_' + normalizedFileName);
      console.log(total + ":" + position);
      $('#progress_' + normalizedFileName).css('width', (position * 100 / total).toString() + '%');
   }, false);
   eventSource.addEventListener("loadstart", function (evt) {
      console.log('loadstart');
   }, false);
   eventSource.addEventListener("abort", function (evt) {
      console.log('abort');
   }, false);
   eventSource.addEventListener("error", function (evt) {
      console.log('error');
   }, false);
   eventSource.addEventListener("timeout", function (evt) {
      console.log('timeout');
   }, false);
   xhr.onreadystatechange = function (evt) {
      if (xhr.readyState == 4) {
         console.log('onreadystatechange: File uploaded.');
      }
   };
    xhr.open('post', url, true);
    xhr.send(formData);
}
</script>

जब भी "onreadystatechange: फ़ाइल अपलोड की गई।" कंसोल में छपा हुआ है, मुझे पता है कि फाइलों में से एक अपलोड हो चुका है। लेकिन मैं "कोई भी फाइल अपलोड नहीं कर पा रहा हूं जो" सभी फाइलों को अपलोड कर देगा।

किसी भी मदद के लिए धन्यवाद। मैं jquery का उपयोग कर रहा हूं, अगर किसी के पास एक jquery का उपयोग कर समाधान हो।


आपको अपने मामले में एक काउंटर और सेट इन्टरवॉल विधि की आवश्यकता होगी, यह प्रयास करें:

<input id="upload" multiple="multiple" />

<script>
var files = document.getElementById("upload").files;
var counter = 0;

for (var i = 0, length = files.length; i < length; i++) {
   var file = files[i];
   var uploadFunc = function (arg) {
      return function () {
         processXHR(arg);
      };
   }(file);      
   uploadFunc();
}

var interval = setInterval(function() {
    if(counter == files.length) {
        clearInterval(interval);
        console.log("All Files uploaded!");
    }
}, 100);

function processXHR(file) {
   var normalizedFileName = getNormalizedName(file.name);
   var url = 'upload_file/';
   var formData = new FormData();
   formData.append("docfile", file);
   var xhr = new XMLHttpRequest();
   var eventSource = xhr.upload;
   eventSource.addEventListener("progress", function (evt) {
      var position = evt.position || evt.loaded;
      var total = evt.totalSize || evt.total;
      console.log('progress_' + normalizedFileName);
      console.log(total + ":" + position);
      $('#progress_' + normalizedFileName).css('width', (position * 100 / total).toString() + '%');
   }, false);
   eventSource.addEventListener("loadstart", function (evt) {
      console.log('loadstart');
   }, false);
   eventSource.addEventListener("abort", function (evt) {
      console.log('abort');
   }, false);
   eventSource.addEventListener("error", function (evt) {
      console.log('error');
   }, false);
   eventSource.addEventListener("timeout", function (evt) {
      console.log('timeout');
   }, false);
   xhr.onreadystatechange = function (evt) {
      if (xhr.readyState == 4) {
         counter += 1;
      }
   };
    xhr.open('post', url, true);
    xhr.send(formData);
}
</script>

क्या आप जानते हैं कि आप कितने कॉल कर रहे हैं? यदि हां, तो कम से कम एजेक्स कॉलबैक, आप गिनती की जांच करते हैं। कुछ इस तरह

if (ajaxCallCount === ajaxCallsLength) {
 // Do stuff involving post all ajax calls
} else {
 ajaxCallCount++;
}




xmlhttprequest-level2