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