このページの本文へ

File APIでブラウザーからローカルファイルを操作 (5/5)

2010年10月05日 10時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

進捗状況を表示する

 サンプル5は大きなサイズのファイルを指定すると読み込みに時間がかかり、ブラウザー上の見た目は変化しない状態が続きます。ブラウザーによってはスクリプトの停止を確認するダイアログが表示されることもあります。

 そこで、ファイルをどのぐらい読み込んだか、進捗状況を表示する処理を追加します。進捗状況はFileReaderオブジェクトのonprogressイベントを利用し、onprogressイベントが発生したら読み込まれたデータのバイト数をページ上に表示します。イベントハンドラにはイベントオブジェクトが渡され、イベントオブジェクトのloadedプロパティに読み込まれたファイルのバイト数が入ります。このバイト数を以下のようにしてページ上に表示するとユーザーのストレスを軽減できます。


reader.onprogress = function(evt){
    var loadDataSize = evt.loaded;
    document.getElementById("dumplist").innerHTML = "データを読み込み中..."+loadDataSize+" bytes";
}


 サンプル5を改良して、進捗状況を表示するようにしたのがサンプル6です。おまけとしてバイナリデータの左側にアドレスを表示する処理も追加しました。

【図】16.png

アドレスや進捗状況の表示を追加した。進捗状況の処理はブラウザーによって異なる

サンプル6


<!doctype html>
  <head>
    <meta charset="utf-8" />
    <title>ダンプリストを表示2</title>
    <style type="text/css"><!--
      #dumplist {
        border: 1px solid gray;
        font-family: courier; font-size:11pt;
      }
      span {
        color : red;
      }
    --></style>
  </head>
  <body>
    <h1>ダンプリストを表示2</h1>
    <form action="./test.cgi" method="get">
      <input type="file" id="myFile" />
      <input type="button" id="hexDump" value="内容を表示" />
    </form>
    <div id="dumplist"></div>
    <script>
      document.getElementById("hexDump").addEventListener("click", function(){
        document.getElementById("dumplist").innerHTML = "データを読み込み中...";
        var fileData = document.getElementById("myFile").files[0];
        var reader = new FileReader();
        reader.onload = function(evt){
          var count = 0;
          var hexlist = "";
          var chrlist = "";
          var alldata = "";
          var adrs = 0; // アドレスは0から開始
          for(var i=0; i<fileData.size; i++){
            var data = evt.target.result.charCodeAt(i);  // 1バイト読み出し
            var chr = evt.target.result.charAt(i); // 1文字読み出し
            if (chr <0x20) { chr = "<span>.</span>"; } // 0x20以下の値は制御コードなので.にする
            if (chr == "<") { chr = "&lt;"; } // 不等号記号の処理
            if (chr == ">") { chr = "&gt;"; } // 不等号記号の処理
            if (chr == "&") { chr = "&amp;"; } // &の処理
            var hex = "0"+data.toString(16);  // 16進数に変換
            hex = (hex.substring(hex.length-2, hex.length)).toUpperCase(); // 2桁の16進数にする
            hexlist += hex + " ";
            chrlist += chr;
            count++;
            if (count > 16){  // 横16バイトで区切る
              var hexadrs = "0000000"+adrs;
              hexadrs = (hexadrs.substring(hexadrs.length-8, hexadrs.length)).toUpperCase();
              count = 0;
              alldata += hexadrs+" : "+hexlist+"|"+chrlist+"<br />";
              hexlist = chrlist = "";
              adrs = adrs + 16; // アドレスも16バイト進める
            }
          }
          document.getElementById("dumplist").innerHTML = alldata;  // 内容をページ上に表示
        }
        // 進捗状況を表示する
        reader.onprogress = function(evt){
          var loadDataSize = evt.loaded;
          document.getElementById("dumplist").innerHTML = "データを読み込み中..."+loadDataSize+" bytes";
        }
        reader.readAsBinaryString(fileData);
      }, true);
    </script>
  </body>
</html>


 今回紹介したFile APIを使うとブラウザーで簡単にファイルの内容を調べられます。サンプル6は読み出す処理が低速なので、もっと速く処理できるようにプログラムを改良してもよいでしょう。また、ファイルサイズが大きい場合は事前に警告を出して先頭の256バイトだけを表示する、といった工夫もできます。ぜひ挑戦してみてください。

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています