5

jQuery ajaxを使用して、非常に大きなテキストフィールドを持つフォームのアップロード進行状況を取得することは可能ですか? クライアントは送信されたバイト数を知っていると思いますが、Google で検索すると、サーバー サイト コードを使用したファイル アップロードのソリューションしか見つかりません。

これは私のajaxリクエストです：

$.ajax({
        type: "POST",
        url: "index.php?action=saveNewPost",
        data: {textbox1: textbox1,textbox2: textbox2},
        contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        success: function(){
            //
        }
    });

すでに送信されたバイト数を含むパラメーターを持つ「onProgress」のようなものがあることを望んでいました...

解決策を見つけた

$.ajax({
        xhr: function() {
            var req = $.ajaxSettings.xhr();
            if (req) {
                req.upload.addEventListener('progress', function(event) {
                    if (event.lengthComputable) {
                        $('#ajaxFeedbackDiv').html(event.loaded); // = 'test'; //event.loaded + ' / ' + event.total;
                    }
                }, false);
            }
            return req;
        },
        type: "POST",
        url: "index.php?action=saveNewPost",
        data: {textbox1: textbox1,textbox2: textbox2},
        contentType: "application/x-www-form-urlencoded;charset=UTF-8"
        }
    });

これは機能しているようですが、まだあります

2 つの問題:

  1. 私のローカルホストの接続は速すぎるため、実際に「進行状況」が機能していることを確認するのは困難です。このツールhttp://mschrag.github.comを同じネットワーク内の 2 台目の Mac にインストールしましたが、完全に機能していることがわかります。
  2. これが、XHR/HTML5 と互換性のないブラウザーでフォールバック フレンドリーになるかどうかはわかりません。つまり、進行状況情報なしでアップロードするだけですか?
4

2 に答える 2

4

XMLHttpRequestこれは、HTML5 対応のブラウザーで新しいオブジェクトを使用して実現できます。progressサブスクライブして AJAX 操作の通知を受けることができるイベントをサポートします。

次に例を示します。

document.getElementById('myForm').onsubmit = function() {
    var xhr = new XMLHttpRequest();

    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            var percentage = Math.round((e.loaded * 100) / e.total);
            document.getElementById('progress').innerHTML = percentage + '%';
        }
    }, false);

    xhr.open(this.method, this.action, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };

    xhr.send(new FormData(this));
    return false;    
};

ここにlive demo.

于 2013-03-30T10:03:56.410 に答える
0

おそらく、このjqueryプラグインを使用できます：

https://www.articlege.com/adrianillo/article/DataUploader

アップロードプロセスにプログレスバーを追加するだけです

于 2015-04-01T15:39:18.967 に答える