Blobを用いて分割読み込みする

概要
ファイルを一括読み込みするサンプル
ファイルを分割読み込みするサンプル
HTTPリソースを分割読み込みするサンプル

概要

Blob は Binary Large OBject の略です。
JavaScript の Blob は HTML5 関連仕様である File API で定義されています。
File API によるファイル読み込みや、fetch() によるサーバから非同期通信で、データを読み出す際に利用されます。
File API の File クラスは Blob のサブクラスとして実装されています。
slice() を用いることにより、巨大なファイルや、巨大なデータ通信を、分割して逐次読み込みすることが可能です。

ファイルを一括読み込みするサンプル

File API を用いてファイルを一括読み込みする例を下記に示します。読み込んだファイルの内容は開発ツールのコンソールに表示されます。

HTML

<div>
<input type="file" id="file1">
<button id="btn1">OK</button>
</div>
<script>
document.getElementById("btn1").addEventListener("click", function(e) {
  var files = document.getElementById("file1").files;
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var reader = new FileReader();
    reader.onload = function(e) {
      console.log("------onload------");
      console.log("state=" + e.target.readyState);
      console.log("length=" + e.target.result.length);
      console.log("data=" + e.target.result);
    }
    reader.onerror = function(e) {
      console.log("error=" + e.target.error.name);
    }
    reader.readAsText(file, "utf-8");
  }
});
</script>

表示

ファイルを分割読み込みするサンプル

slice() を用いることで、分割読み込みすることが可能となります。分割読み込みの際には、下記の様な関数を用意しておくと便利です。

JavaScript

function readBlobAsText(blob, size, callback) {
  var offset = 0;
  var reader = new FileReader();
  reader.onload = function(e) {
    callback(e.target.readyState, e.target.result);
    if (offset < blob.size) {
      slice = blob.slice(offset, offset + size, blob.type);
      offset += size;
      reader.readAsText(slice, "utf-8");
    }
  }
  reader.onerror = function(e) {
    console.log("error=" + e.target.error.name);
  }
  slice = blob.slice(offset, offset + size, blob.type);
  offset += size;
  reader.readAsText(slice, "utf-8");
}

上記を用いて、ファイルを 10バイトずつ分割読み込みする例を下記に示します。

HTML

<div>
<input type="file" id="file2">
<button id="btn2">OK</button>
</div>
<script>
document.getElementById("btn2").addEventListener("click", function(e) {
  var files = document.getElementById("file2").files;
  for (var i = 0; i < files.length; i++) {
    readBlobAsText(files[i], 10, function(state, data) {
      console.log("------onload------");
      console.log("state=" + state);
      console.log("length=" + data.length);
      console.log("data=" + data);
    });
  }
});
</script>

表示

HTTPリソースを分割読み込みするサンプル

fetch() と Blob を組み合わせることで、http://～や https://～で始まるリモートのリソースを分割読み込みすることが可能です。

HTML

<input type="text" id="file3" value="https://www.tohoho-web.com/index.htm">
<button id="btn3">OK</button>
<script>
document.getElementById("btn3").addEventListener("click", function(e) {
  var url = document.getElementById("file3").value;
  window.fetch(url)
    .then(function(response) {
      return response.blob();
    })
    .then(function(blob) {
      readBlobAsText(blob, 1024, function(state, data) {
        console.log("------onread------");
        console.log("state=" + state);
        console.log("length=" + data.length);
        console.log("data=" + data);
    });
  });
});
</script>

表示

初版:2018年5月6日最終更新:2018年5月6日

https://www.tohoho-web.com/how2/blob-slice.html