javascript - 使用表单数据和 jQuery(1.10.2) Ajax 在文件上传进度中未调用处理函数

Question

我正在创建一个消息发送界面以及单个文件上传(几个文本字段和带有一个文件上传按钮的文本区域)。我想在发送消息时显示进度条。

我编写了一个js函数来使用jquery ajax发送消息，它工作正常。

现在我正在尝试附加进度事件。为此，我使用谷歌和堆栈溢出修改了我的 jquery ajax 代码，如下所示:

var form = new FormData(document.getElementById('frm_send_msg'));
    var file = document.getElementById('attachment').files[0];
    if (file) {
        form.append('attachment', file);
    }
    $.ajax({
        url: '/send_msg.php',
        type: 'POST',
        async: false,
        cache: false,
        dataType: 'json',
        contentType: false,
        processData: false,
        data: form,
        xhr: function() {  // custom xhr
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // check if upload property exists
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        success: function(data) {
            //code to hide sending interface
        },
        complete: function() { //     
           alert("complete");
        },
        error: function() {

            alert("ERROR in sending message");
        }
    }) 

我编写了一个函数来处理进度事件:

function progressHandlingFunction(evt) {
    console.log('updating fun called');
    // evt is an ProgressEvent.
    if (evt.lengthComputable) {
        console.log('updating');
        var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
        // Increase the progress bar length.
        $(".progress > div").css({
            width: percentLoaded + '%'
        });

    } else {
        console.log('not updating');
    }
}

但是我既没有从 ProgressHandlingFunction 函数中获取任何一个控制台日志条目，也没有我的 .progress div 显示任何更改。

需要帮助来解决这个问题!

这是控制台在 chrome 中显示的内容

>XHR finished loading: "http://localhost/send_msg.php". 
  send jquery.js:6
  x.extend.ajax jquery.js:6
  send_msg custom_scripts.js:402
  onclick

我还想在这里提到一件事:

我的表单位于 twitter bootstrap3.0 模式内。？

Answer 1

我不确定它是否有效，但将您的 ajax 代码修改为此并尝试从 ajax 中删除 success :function(){}。

$.ajax({
        url: '/send_msg.php',
        type: 'POST',
        async: false,
        cache: false,
        dataType: 'json',
        contentType: false,
        processData: false,
        data: form,
        xhr: function() {  // custom xhr
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // check if upload property exists
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        complete: function() { //     
//code to hide sending interface
           alert("complete");
        },
        error: function() {

            alert("ERROR in sending message");
        }
    });

希望对您有帮助。