非同期ダウンロードのサンプル

gistfile1.txt

<script>
var xhr = new XMLHttpRequest();
$(function () {
    $('#submitbutton').click(function() {
      //var xhr = new XMLHttpRequest();
      xhr.open('GET', 'http://www.tmpz84.info:3000/large-file.iso', true);
      xhr.responseType = 'blob';
      xhr.onload = function () {
          if (this.status === 200) {
          var blob = this.response;
          // ・・・Blobの処理
          }
      };
      // ダウンロードの進捗状況を取得します
      xhr.onprogress = function (e) {
      // e.loaded: ダウンロード済みのバイトサイズ
      // e.total:  トータルの倍とサイズ
        //console.debug('[progress]', e.loaded ,e.total);
        $("#progress_text").html("[progress] " + e.loaded + " / " + e.total);
      }
      xhr.send();
    });

    $('#cancelbutton').click(function() {
      xhr.abort();
    });

});
</script>

<div id="progress_text">
</div>

<button type="button" id="submitbutton" >
  <font size="2">ここを</font><font size="5" color="#333399">押してね</font>
</button>

<button type="button" id="cancelbutton" >
  キャンセル
</button>