0

私はhtml5と最新バージョンのjqueryを使用するajaxファイルローダーに取り組んできました。新しい promise ベースの ajax での進行状況コールバックの使用に関して混乱しています。たとえば、通知機能。自動的に呼び出されますか？または、そのハンドラーを作成する必要がありますか。私の現在のコードでは...明らかに抜粋です。進捗コールバックはヒットしません。利用可能なプラグインがあることも認識していますが、それらを使用できません。

var ajaxFileUpload = new $.ajax({
            type:'POST',
            url:"/popup/file_upload.php",
            data:_private.appendFormData(file),
            contentType:false,
            processData:false

        }).progress(function (event) {
                console.log(event);
            })
            .done(function (response) {
                console.log("done");


            })
            .fail(function (event) {
                console.log("fail");
            })}};
4

3 に答える 3

6

アップロードの進行状況

アップロード時にプログレス バーが必要な場合は、https: //github.com/malsup/form/blob/master/jquery.form.js の 292 ～ 309 行を参照してください (これは jquery プラグインですが、それを引き出すことができます)プラグインなしで使用するための小さなビット）。 

s.xhr = function() {
    var xhr = jQuery.ajaxSettings.xhr();
    if (xhr.upload) {
        xhr.upload.addEventListener('progress', function(event) {
            var percent = 0;
            var position = event.loaded || event.position;
            var total = event.total;
            if (event.lengthComputable) {
                percent = Math.ceil(position / total * 100);
            }
            options.uploadProgress(event, position, total, percent);
        }, false);
    }
    return xhr;
};

ダウンロードの進行状況

ダウンロード時にプログレス バーが必要な場合は、http://www.w3.org/TR/progress-events/のサンプル コードを参照してください。あなたのサーバーはContent-Length、それが機能するために応答ヘッダーに を与える必要があります。 

var progressBar = document.getElementById("p"),
  client = new XMLHttpRequest()
client.open("GET", "magical-unicorns")
client.onprogress = function(pe) {
if(pe.lengthComputable) {
  progressBar.max = pe.total
  progressBar.value = pe.loaded
}
}
client.onloadend = function(pe) {
progressBar.value = pe.loaded
}
client.send()

サーバーの進行状況

しばらく時間がかかるレポートを実行していて、サーバー処理の進行状況が必要な場合は、それを複数の ajax リクエストに変更することをお勧めします: beginFoo, getFooProgress, getFooResult. その他の方法には、COMET または Websocket 接続を使用してサーバーから進行状況を伝達する方法や、最初の ajax 要求が応答を待機している間に別のプル Web サービスを使用する方法があります。

注: html5 のクールな新しい <progress> 要素

プログレス html5 要素が必要な場合: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress。

于 2013-05-23T20:22:43.553 に答える
3

アップロードとダウンロードのコールバックを使用して、jQuery で XHR2 進行状況イベントを取得するために、GitHub でこれを見つけました。

(function addXhrProgressEvent($) {
    var originalXhr = $.ajaxSettings.xhr;
    $.ajaxSetup({
        xhr: function() {
            var req = originalXhr(), that = this;
            if (req) {
                if (typeof req.addEventListener == "function" && that.progress !== undefined) {
                    req.addEventListener("progress", function(evt) {
                        that.progress(evt);
                    }, false);
                }
                if (typeof req.upload == "object" && that.progressUpload !== undefined) {
                    req.upload.addEventListener("progress", function(evt) {
                        that.progressUpload(evt);
                    }, false);
                }
            }
            return req;
        }
    });
})(jQuery);



// usage:
// note, if testing locally, size of file needs to be large enough
// to allow time for events to fire

$.ajax({
    url: "./json.js",
    type: "GET",
    dataType: "json",
    complete: function() { console.log("Completed."); },
    progress: function(evt) {
        if (evt.lengthComputable) {
            console.log("Loaded " + parseInt( (evt.loaded / evt.total * 100), 10) + "%");
        }
        else {
            console.log("Length not computable.");
        }
    },
    progressUpload: function(evt) {
      // See above
    }
});

ちょっとした作業で.progress()、設定オブジェクトで指定されたコールバックではなく、遅延コールバックを呼び出すように適応させることができます。

于 2013-10-28T16:20:40.500 に答える
3

$.Deferred.notify() からの更新で進行メソッドを提供できるように、カスタムの Deferred で ajax 関数を書き直すことをお勧めします。あなたは次のようなことをするかもしれません:

function doAjax() {
  var deferred = $.Deferred();

  $.ajax({
    type:'POST',
    url:"/popup/file_upload.php",
    success: deferred.resolve,  // resolve it 
    error: deferred.reject,  // reject it
    xhrFields: {
      onprogress: function (e) {
        if (e.lengthComputable) {
          deferred.notify(parseInt(e.loaded / e.total * 100), 10);  // notify as a factor of the event object
        }
      }
    }
  }

  return deferred.promise();
}

doAjax()
  .done(function(data) {})
  .fail(function() {} ) 
  .progress(function(value) {  // notify value is available as the param
    console.log('Progress: ', value + "%");  // output
  }
);

これをテキストに出力するか、HTML5 進行状況要素http://jsbin.com/wevolosa/2/edit?html,console,outputに入力します

于 2014-02-23T21:17:19.570 に答える