Javascript，同时jQuery多个AJAX请求

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]更改时上传图像（以及后来的其他文件）。 我试图用一个请求上传多个文件，但进度事件将它们注册为一个。 我有想法将（块）文件分割成ant发送它们，但这种变体似乎更容易（只需要让它工作，然后我改进它）。 谢谢。

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