1

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

4

2 回答 2

3 
$(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(){
于 2012-06-05T16:40:18.467 回答
2

问题是：

async:false,

删除它解决了问题。

于 2012-06-05T17:55:23.190 回答