Javascript, jQuery 同时处理多个 AJAX 请求 [英] Javascript, jQuery multiple AJAX requests at same time

问题描述

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正常发送请求，但是只得到一个(第一个)数据返回.

I'm trying to upload file one by one. But the problem is that ajax sending request properly, but getting only one(first) data return.

我的目标是创建在 input[type=file] 更改时上传图像(以及后来的其他文件)的脚本.我试图通过一个请求上传多个文件，但进度事件将它们注册为一个.我有想法将(块)文件切成碎片并发送给它们，但这个变体似乎更容易(只需要让它工作，然后我改进它).谢谢.

My goal is to create script which uploads images(and later other files) on input[type=file] change. I tried to upload multiple files with one request, but progress event registering them as one. I had idea to slice(chunk) files into pieces ant send them, but this variant seems easier(just need to make it work, then I improve it). Thanks.

推荐答案

使用 jQuery 很容易做到.when();

Ajax 调用可以是任意数量.所以你需要用apply();并创建 ajax 调用数组.现在代码看起来像这样:

Ajax calls can be any number. So you need to use it with apply(); and create array of ajax calls. Now code looks like this:

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

这篇关于Javascript, jQuery 同时处理多个 AJAX 请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！