2 
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 正确发送请求，但只返回一个（第一个）数据。

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

4

1 回答 1

5

使用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);
}
于 2013-10-25T14:09:45.427 回答