Javascript，jQuery多個AJAX請求在同一時間

Question

function makeCall(file, handlerFile, sendMethod, formData) { 
    //console.log(instance.files); 

    $.ajax({ 
     url: handlerFile, 
     type: sendMethod, 
     xhr: function() { // Custom XMLHttpRequest 
      var xhr = $.ajaxSettings.xhr(); 

      if(xhr.upload) { // Check if upload property exists 
       xhr.upload.addEventListener('progress', progressHandlingFunction.bind(file)); // For handling the progress of the upload 
       //xhr.upload.addEventListener('loadend', successHandler.bind(xhr)); 
      } 

      //console.log(xhr); 

      return xhr; 
     }, 
     beforeSend: beforeSendHandler.bind(file), 
     success: completeHandler.bind(file), 
     //error: errorHandler, 
     data: formData, // Form data 
     dataType: 'json', 
     cache: true, 
     //async: false, 
     contentType: false, 
     processData: false 
    }); 

} 



$(".afu-input").on('change', function() { 
     var i = 0; 
     var length = this.files.length; 
     var files = this.files; 

     var calling = setInterval(function() { 
      var file = files[i]; 
      console.log(file); 

      uid = generateUniqueId(); 
      file.id = uid; 

      var formData = null; 
      formData = new FormData(); 

      formData.append(i, file); 
      formData.append(i, [uid]); 

      makeCall(file, handlerFile, sendMethod, formData); 

      i++; 

      if (i >= length) { 
       clearInterval(calling); 
      } 
     }, 2000); // Delay is for testing. Normaly there is no delay 
} 

我試圖一個一個上傳文件。但問題是，ajax正確發送請求，但只返回一個（第一個）數據。

我的目標是創建一個腳本，用於上傳輸入[type = file]變化的圖像（以及其他文件）。我試圖用一個請求上傳多個文件，但是將進度事件註冊爲一個。我有想過將大塊文件分割成幾部分，但是這個變體看起來更簡單（只需要讓它工作，然後我改進它）。謝謝。

Answer 1

它很容易與jQuery.when();

Ajax調用，使其可以是任何數字。所以你需要使用apply（）;並創建一個Ajax調用數組。現在代碼如下所示：

function makeCall(file, formData) { 
    return $.ajax({ // It's necessary to return ajax call 
     url: 'handler.php', 
     type: 'POST', 
     xhr: function() { // Creating custom XHR to register progress event(If you know better solution - please post ir) 
      var xhr = $.ajaxSettings.xhr(); 

      if (xhr.upload) { // Check if upload property exists 
       xhr.upload.addEventListener('progress', progressHandlingFunction.bind(file)); // Registering progress event 
      } 

      return xhr; 
     }, 
     // Events handlers 
     beforeSend: beforeSendHandler.bind(file), 
     success: completeHandler, 
     data: formData, 
     dataType: 'json', 
     cache: true, 
     contentType: false, 
     proccessData: false 
    }); 
} 

$('.afu-input').on('change', function() { 
    var files = this.files; 
    var calls = []; 

    $.each(files, function(i, file) { 
     uid = generateUniqueId(); 
     file.id = uid; 

     var formData = new formData(); 

     formData.append(0, file); // Just easier to set index to 0 cause for every file returning new obejct, so is no point to set more indexes 

     calls.push(makeCall(file, formData)); // And finally pushing calls to array 
    }); 

    // Using jQuery.when 
    // Cause I don't know how many calls will be I'm using "apply" so I can add array instead of one by one calls 
    $.when.apply($, calls); // Exactly I don't know why need "$" 
} 

function beforeSendHandler() { 
    console.log(this); 
} 

function completeHandler(data) { 
    console.log(data); 
} 

function progressHandlingFunction(e) { 
    console.log(e); 
    console.log(this); 
}