Ajax 表单提交进度功能失败？答案

【问题标题】：Ajax form submission progress function failing?Ajax 表单提交进度功能失败？
【发布时间】：2012-06-05 16:37:05
【问题描述】：

我正在通过 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/

【问题讨论】：

标签： javascript jquery ajax forms

【解决方案1】：

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

应该是：

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

甚至更好：

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

如果你想使用live (jQuery

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

【讨论】：

啊，是的，我的意思是使用.on，但问题仍然存在。
@Silver89。好吧，所以在这里你解决了一个问题。恐怕我得暂时离开键盘了。我希望你也能回答其他问题。祝你好运！

【解决方案2】：

问题是：

async:false,

删除解决了问题。

【讨论】：