ファイル内容表示

W3Cで標準化が進められている「File API」を使うと、指定したローカルファイルのファイル情報やファイルの中身(データ)をJavaScriptで取得できます。
実際にローカルにあるファイルの内容を表示する処理です。サーバ側では何も処理せずに、FileAPIを使った処理になります。

ソースコードはこんな感じです。大きいファイルはブラウザ固まっちゃうかもだから気をつけて試してみてください。

ライブラリとか使えばもっとシンプルになるはずです。汚いソースっていうか直感だけのソースで申し訳ないですが・・・何も考えてない感じで申し訳ないですが・・・参考になればと。。。。

        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 = "ファイルサイズ"+fileData.size+"byte<br>";
          var adrs = 0; // アドレスは0から開始
          for(var i=0; i") { chr = ">"; }
            if (chr == "&") { chr = "&"; }
            var hex = "0"+data.toString(16);
            hex = (hex.substring(hex.length-2, hex.length)).toUpperCase();
            hexlist += hex + " ";
            chrlist += chr;
            count++;
            if (count > 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;
            }
          }
          document.getElementById("dumplist").innerHTML = alldata;
        }
        // 進捗状況を表示する
        reader.onprogress = function(evt){
          var loadDataSize = evt.loaded;
          document.getElementById("dumplist").innerHTML = "データを読み込み中..."+loadDataSize+" bytes";
        }
        reader.readAsBinaryString(fileData);
      }, true);