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

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

関連記事

no image

JavaScriptでバイナリからpngファイルを識別する

input要素で指定した画像がpngファイルか確認し、pngファイルだった場合にその幅と高さをコンソールに出力しています。 <html> <head> </head&gt …

no image

JavaScriptで値が素数か判定する

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

no image

JavaScriptでMath.jsを用いて階乗の計算をする

math.permutations関数の引数に任意の数値を渡すと、その階乗の値が返されます。また、第二引数にサブセットの値を渡すと、そこまでの計算結果が返されます。 <html> < …

no image

シンプルなレスポンシブチャートJavaScriptライブラリChartist.jsの使い方

公式サイト http://gionkunz.github.io/chartist-js/index.html GETTING STARTEDhttp://gionkunz.github.io/char …

no image

チャートを簡単に追加できるJavaScriptライブラリChart.jsの使い方

折れ線グラフ、棒グラフ、レーダーチャート、ドーナツチャート、円グラフ、ポーラチャート、バブルチャート、散布図等のチャートをWebサイトに簡単に追加することができます。 公式サイト https://ww …