1

jQuery を使用して写真をアップロードしており、onprogress イベントのリスナーをアタッチしています。ただし、数メガバイトの写真をアップロードする場合でも、発生する唯一の onprogress イベントは 100% のときです。Dropbox や Facebook などの他のサイトでは、はるかに流動的な進行状況バーが表示されるのを見てきました。アップロードの進行状況をより頻繁に更新するにはどうすればよいですか?

サンプル アップロード コード:

var file = $photoFile.get(0).files[0];
var fileBlob = file && file.slice();
var formData = new FormData();
var title = $photoTitle.val();

formData.append('file', fileBlob);
formData.append('title', title);

$.ajax({
    url: '/api/v1/photo/submit',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    xhrFields: {
        onprogress: function(ev) {
            console.info('upload progress', ev);
            if (ev.lengthComputable) {
                var percentUploaded = Math.floor(ev.loaded * 100 / ev.total);
                console.info('Uploaded '+percentUploaded+'%');
                // update UI to reflect percentUploaded
            } else {
                console.info('Uploaded '+ev.loaded+' bytes');
                // update UI to reflect bytes uploaded
            }
        }
    }
}).done(function(response) {
    // do stuff
}).fail(function() {
    // handle error
});
4

1 に答える 1

4

このスタックオーバーフローの質問からこの借用コードを実行できました。

私が犯していた主な間違いは、 への呼び出しonprogressのプロパティ内に依存していたことです。代わりに、より頻繁に進行状況の更新を取得するために、次のプロパティを使用してカスタム XMLHttpRequest を渡しました。xhrFields$.ajaxxhr

$.ajax({
    url: '/api/v1/photo/submit',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    xhr: function() {
        var myXhr = $.ajaxSettings.xhr();
        if (myXhr.upload) {
            myXhr.upload.addEventListener('progress',function(ev) {
                if (ev.lengthComputable) {
                    var percentUploaded = Math.floor(ev.loaded * 100 / ev.total);
                    console.info('Uploaded '+percentUploaded+'%');
                    // update UI to reflect percentUploaded
                } else {
                    console.info('Uploaded '+ev.loaded+' bytes');
                    // update UI to reflect bytes uploaded
                }
           }, false);
        }
        return myXhr;
    }
}).done(function(response) {
    // do stuff
}).fail(function() {
    // handle error
});

警告: これは新しい Web テクノロジを利用しているため、古いブラウザ (特に IE) では機能しません。

于 2013-10-21T20:37:54.233 に答える