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 に答える