javascript - Ajax 表单提交进度功能失败？

Question

我正在通过 ajax 提交表单并尝试在上传时更新一个简单的进度条。表单提交工作完美，但我无法让进度条更新甚至请求当前加载的数量。

<form enctype="multipart/form-data">          
    <input name="file" type="file" />
    <button>Update Account</button>
</form>
<progress value="0" max="100"></progress>

jQuery + Ajax

$(document).on("submit", "form", function(){

    var formData = new FormData($('form')[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        xhr: function() {
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            }
            return myXhr;
        },
        async:false,
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

提交表单后应运行 addEventListener 以便运行此函数以更新进度:

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $("progress").attr('value', e.loaded);
        $("progress").attr('max', e.total);
    }
}

但是 myXhr.upload.addEventListener(); 中的任何函数似乎都没有运行？

myXhr.upload.addEventListener('progress', alert("test"),  false);

工作正常，但下面没有运行，为什么会这样？:

myXhr.upload.addEventListener('progress', function(){alert("test")},  false);

这个例子使用了类似的编码:

http://www.matlus.com/html5-file-upload-with-progress/

Answer 1

$(document).live("submit", "form", function(){

应该是:

$(document).on("submit", "form", function(){

或者更好:

$("#static-container-Id").on("submit", "form", function(){

如果你想使用live (jQuery < 1.4.4)

$("form").live("submit", function(){