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

ブラウザのコンソールからページ内の画像リストを確認する

ブラウザのコンソールにdocument.imagesの内容を出力すると、現在の文書内にある画像のリストが返され、任意の要素をクリックでその画像を確認することができます。 console.log(doc …

no image

JavaScriptで値が素数か判定する

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

no image

ブラウザとモバイルデバイス用のインタラクティブチャートを実装するJavaScriptチャートライブラリGoogle Chartsの使い方

公式サイト https://developers.google.com/chart サンプルコード <html> <head> <script type="te …

no image

File APIでinput要素で選択したファイルの情報を確認する

サンプル <input type="file"> <script> const input = document.querySelector(‘input’ …

no image

JavaScriptでスタックトレースを出力する関数Console.trace

console.trace()を実行するとコンソールにスタックとレースを出力することができます。 function test1() { test2(); } function test2() { co …