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

<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>