3テラバイト

プログラム関連備忘録サイト。主にゲーム。

HTML JavaScript

input要素で選択したファイルのバイナリデータをFile APIで表示する

投稿日:

サンプルコード

input要素で選択したファイルのバイナリデータを16進数表記でpre要素に出力します。

<input type="file">
<pre></pre>
<script>
function zeroPadding(num, digit){
  return (Array(digit).join('0') + num).slice(-digit);
}

const header = "ADDRESS  00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F" + "\n";
const input = document.querySelector('input');
const pre = document.querySelector('pre');
pre.innerHTML = header;

input.addEventListener("change", (event) => {
  let fileList = event.target.files;
  let fileReader = new FileReader();
  fileReader.readAsArrayBuffer(fileList[0]);
  fileReader.onload = function(event){
    let dataView = new DataView(fileReader.result);

    let bin = "";
    for(let i = 0; i < dataView.byteLength; i++)
    {
      if(i % 16 == 0)
      {
        if(i != 0) bin += "\n";
        bin += zeroPadding(i.toString(16), 8);
      }
      bin += " " + zeroPadding(dataView.getUint8(i).toString(16), 2);
    }
    pre.innerHTML = header + bin;
  }
},false);
</script>

リンク

FileReader.readAsArrayBuffer() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsArrayBuffer

DataView – JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/DataView

-HTML, JavaScript


comment

メールアドレスが公開されることはありません。

関連記事

no image

JavaScriptでブラウザ履歴の前のページや次のページへ移動する

前のページへ window.history.back() 次のページへ window.history.forward() 指定ページ数前へ window.history.go関数の引数にマイナスの数値 …

no image

JavaScriptで値が素数か判定する

以下のコードでは、渡された値が素数か判定する関数isPrimeNumberを定義しています。 Number.isIntegerで引数が整数か判定し、その後1から引数で渡された値の範囲で引数の値を割って …

no image

ブラウザのコンソールからページ内の埋め込みリストを確認する

ブラウザのコンソールにdocument.embedsの内容を出力すると、現在の文書内にある埋め込みのリストが返されます。 console.log(document.embeds)

no image

HTML – svgタグで図形を描画する

サンプルコード <!DOCTYPE html> <html> <head> </head> <body> <svg width=&qu …

no image

JavaScriptで値を素因数分解する

以下のコードでは、渡された値を素因数分解して文字列で結果を返す関数primeFactorizationを定義しています。 function primeFactorization(value) { va …