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＆lt; 1.4.4）

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

Answer 2

问题是：

async:false,

删除它解决了问题。

Ajax表单提交进度函数失败了吗？

2 个答案: