Blob でデータを定義

File API の入力データを Blob で定義してみました。

【Source Code】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var str1 = "Blob で表示されるデータを定義します\n"; 
var str2 = "文字列テスト"; 
var str3 = "TEXT 文字列を定義\n"; 
var blob = new Blob(["Blob Test\n", str1, str2, str3], {type:"text/plain"});

// FileReader オブジェクトを生成
var file_reader = new FileReader();

// 読み込みを開始する
file_reader.readAsText(blob);

// 読み込み成功時に実行されるイベント
file_reader.onload = function(e)
{   window.alert(file_reader.result);
};
</script>
</body>
</html>

  1. new Blob() で文字列を並べて配列として定義します。
  2. FileReader() を生成して file_reader.readAsText(blob); で blob からデータを読み出します。
  3. file_reader.onload の関数で、読み出したデータを確認します。
  4. Blob は File と同様の機能を備えています。
    Blob はファイルに書き出すデータの定義などに使われるようです。
    interface File : Blob {
      readonly attribute DOMString name;
      readonly attribute long long lastModified;
    };
    

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)