jQuery AJAX大文字フィールドの進捗状況

Question

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" 
     } 
    }); 

がまだあるaltoughこれは、動作しているようです210の

2の問題：それは「進歩」、実際に作業を確認するのは難しいので、

1. 私はlocalhost上の接続は、あまりにも速いです。私は同じネットワーク上の2台目のMacにこのツールhttp://mschrag.github.comをインストールしました。完全に動作しています。
2. XHR/HTML5と互換性のないブラウザでフレンドリーになるかどうかわかりません。進捗情報なしでアップロードするだけですか？

Answer 1

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

は例です：

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です。

Answer 2

たぶん、あなたはこのjQueryプラグインを使用することができます。

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

ただ、実際には `XMLHttpRequest`オブジェクトで` onprogress`コールバックが本当にありますプロセス