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で配列やオブジェクトの一部を代入する分割代入

JavaScriptで変数に配列やオブジェクトから値を代入する際に、左辺の変数名に角括弧[]を付けることで配列やオブジェクトの一部のみ代入することが可能です。 以下の例では変数aに右辺の配列の内最初の …

no image

JavaScriptで値を素因数分解する

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

no image

inputタグで選択した画像をimgタグに表示する

コード input要素で画像を選択した際に、選択した画像をimg要素に表示するサンプルコードです。 URL.createObjectURL()を使用する FileReader.readAsDataUR …

no image

JavaScriptでコンソールに画像を出力する

以下のurl()のカッコ内に画像のURLを指定して実行すると、コンソールにその画像を表示することができます。 console.log("%c ", ‘background: url …

no image

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方

Exif.jshttps://github.com/exif-js/exif-js 使い方 ここではローカルサーバーに配置したHTMLファイルから使用します。fileプロトコルでアクセスしている場合は …