30

ここで提案されているように: https://gist.github.com/HenrikJoreteg/2502497jQuery.ajax() 、ファイルのアップロードに onprogress 機能を追加しようとしています。アップロードは正常に動作し、onprogress イベントは発生していますが、期待どおりではありませんでした。ある時間間隔で繰り返し発生するのではなく、アップロードが完了したときに 1 回だけ発生しています。進行中の更新の頻度を指定する方法はありますか? それとも、できないことをしようとしているのですか？これが私のコードです：

    $.ajax(
    {
        async: true,
        contentType: file.type,
        data: file,
        dataType: 'xml',
        processData: false,
        success: function(xml)
        {
            // Do stuff with the returned xml
        },
        type: 'post',
        url: '/fileuploader/' + file.name,
        xhrFields:
        {
            onprogress: function(progress)
            {
                var percentage = Math.floor((progress.total / progress.totalSize) * 100);
                console.log('progress', percentage);
                if (percentage === 100)
                {
                    console.log('DONE!');
                }
            }
        }
    });

さて、数年経ちました。これを再検討し、GetFreeの回答を使用して、コードを次のように更新しました。

$('#file_input').change(function()
{
    var file = this.files[0];
    $('#upload_button').click(funtion(e)
    {
        req = new XMLHttpRequest();
        req.upload.addEventListener('progress', updateProgress, false);
        req.addEventListener('load', transferComplete, false);
        var url  = 'https://my.url'; 
        req.open('POST', url, true);
        req.setRequestHeader('Content-Type', myFileType);
        req.setRequestHeader('Content-Length', myFileLength);
        req.send(file);
    });
);
function updateProgress(e)
{
    var percent = Math.floor(e.loaded / e.total * 100);
    console.log("percent = " + percent);
}
function transferComplete(e)
{
    console.log("transfer complete");
}

GetFree の投稿を承認済みの回答としてマークしました。遅れて申し訳ありません。

4

3 に答える 3

70

簡単な答え:
いいえ、 を使用してやりたいことはできませんxhrFields。

長い答え:

XmlHttpRequest オブジェクトには 2 つの進行状況イベントがあります。

  • 応答の進行状況( XmlHttpRequest.onprogress)
    これは、ブラウザがサーバーからデータをダウンロードしているときです。

  • リクエストの進行状況( XmlHttpRequest.upload.onprogress)
    これは、ブラウザーがサーバーにデータを送信しているときです (POST パラメーター、Cookie、およびファイルを含む)

コードでは、応答進行状況イベントを使用していますが、必要なのは要求進行状況イベントです。これはあなたがそれを行う方法です：

$.ajax({
    async: true,
    contentType: file.type,
    data: file,
    dataType: 'xml',
    processData: false,
    success: function(xml){
        // Do stuff with the returned xml
    },
    type: 'post',
    url: '/fileuploader/' + file.name,
    xhr: function(){
        // get the native XmlHttpRequest object
        var xhr = $.ajaxSettings.xhr() ;
        // set the onprogress event handler
        xhr.upload.onprogress = function(evt){ console.log('progress', evt.loaded/evt.total*100) } ;
        // set the onload event handler
        xhr.upload.onload = function(){ console.log('DONE!') } ;
        // return the customized object
        return xhr ;
    }
});

オプション パラメータはxhr、jQuery が使用するネイティブ XmlHttpRequest オブジェクトを返す関数である必要があります。

于 2014-01-08T00:00:47.583 に答える
4

リクエストを送信する前に、リクエスト自体にイベント ハンドラを追加する必要があります。jQuery.ajax は、「beforeSend」プロパティhttp://api.jquery.com/jQuery.ajax/を通じてこれを許可します

例: http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

*編集*その例のリンクの2番目のコードサンプルを必ず見てください。最初のものは、最新バージョンの jQuery では古くなっていると思います。

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data){
    //Do something success-ish
  }
});
于 2013-06-06T20:46:23.117 に答える