JavaScript バイナリデータを読み込む

最終更新日

バイナリファイルを読み込むにはFileReaderオブジェクトの「readAsBinaryString()」メソッドを使う。readAsBinaryString()のパラメータに、選択されたファイルオブジェクトを指定します。バイナリファイルの読込が完了すると「load」イベントが発生するので、FileReaderオブジェクトのonloadにイベントハンドラを設定し、読み込み完了時の処理を行います。イベントハンドラにはイベントオブジェクトが渡され、targetオブジェクトのresultプロパティに読み込まれたバイナリファイルが入ります。バイナリデータは、1バイトが1文字として格納されているため、charAt()メソッドやcharCodeAt()メソッド、substring()メソッドやsubstr()メソッド、正規表現などを使って処理することができます。

f <body>
<script>
    window.addEventListener("load" , function(){

        var ele = document.getElementsByTagName("output")[0];
       //ボタンにイベントを設定
        document.getElementById("readBtn").addEventListener("click", function(){
            var fileList = document.getElementById("selFile").files;
           //FileReaderオブジェクトを作成
            var reader = new FileReader();
            //バイナリファイルが読み込まれた場合の処理を設定
            reader.onload = function(evt){
                var bin = evt.target.result;
                //最初の8バイトを表示
                for(var i=0; i<8; i++){
                    ele.innerHTML  += bin.charCodeAt(i).toString(16)+", ";
                }
            }
            reader.readAsBinaryString(fileList[0]);//バイナリファイルの読込開始
        },false);

    }, false);

</script>
<h1>テキストファイルの読込</h1>
<form>
    <p><input type="file" id="selFile" multiple></p>
    <input type="button" value="読み込み" id="readBtn">
</form>
<output></output>
</body>

ファイル選択ボタンをクリックして、バイナリファイルを選択します。

実行結果
実行結果

読み込みボタンをクリックすると、選択されたバイナリファイルが読み込まれ、先頭の8バイトが16進数で表示されます。

実行結果