binary code で記録されたファイルをブラウザから読み込んで、１６進コードに変換してＷＥＢ上に表示させるには

お世話になります。
今朝おたずねした質問に対していただいた回答が、残念ながら作動しませんでした。
どこに問題があるのかお教えいただけますでしょうか。

実現したいこと

題名どおり、バイナリのファイルをブラウザ上で１６進数で表示すること

発生している問題

ＤＯＭで読み込んだファイルの内容ではなく、blob 設定の初期値がスクリプト作動後も同じまま表示されるため、コード変換の結果が出されない

よろしくお願いいたします。

html
1
2<!DOCTYPE html><html>
3<head><meta charset="UTF-8">
4</head>
5<body>
6
7<br>
8	<input type="file"  id="readFile">
9<hr>
10	<div id="result"></div>
11	
12<script>
13
14var newFile = new Blob(['2020 August hello world']); 
15
16var resultElement = document.getElementById( "result" ) ;
17
18var fr = new FileReader();
19
20fr.addEventListener('load', 
21	function () 
22	{
23		var u = new Uint8Array(this.result),
24			a = new Array(u.length),
25			i = u.length;
26			
27		while (i--) // map to hex
28			a[i] = (u[i] < 16 ? '0' : '') + u[i].toString(16);
29			
30		u = null; // free memory
31		
32		resultElement.appendChild( new Text( a ) ) ;
33	}
34);
35
36fr.readAsArrayBuffer(newFile);
37
38	
39</script>
40</body>
41</html>

行動規範の内容に同意します

回答1件

ファイルの扱いはウェブアプリケーションからのファイルの使用に説明されています。

どこに問題があるのか

入力フィールドにイベントが未定義です。

冒頭のページも再確認し、イベント発火の順番、処理手順を確認してください。

input[type="file"] のイベントで FileList を取得
input[type="file"]選択後のプロパティfiles（FileList）から File を取得

（ファイルが１つの場合も、FileListとして渡される）
3. FileReader で内容を読む

CODEPEN FileReaderでダンプ表示

追記）
コールバックによるネストが読みにくい場合、機能を細分化して実装しても良いかもしれません。

javascript
1function convertArrayBufferToHexArray (buf) {
2  let
3    u = new Uint8Array(buf),
4    r = new Array(u.length),
5    i = u.length
6  ;
7  while ( i-- )
8    r[i] = u[i].toString(16).padStart(2,"0");
9  return r;
10}
11
12function convertHexArrayToDumpData (hexChrs) {
13  return hexChrs.reduce( function(a,c,i) {
14    let m = i % 16; // modulo
15    if( i && m === 0 ) a += "\n";
16    a += (m === 0 ? "": " ") + c;
17    return a;
18  },"");
19}
20
21// 以下、ユーザ関数の動作確認
22var sample = "2020 August hello world".match(/./g).map(s => s.charCodeAt(0));
23console.log( sample );
24var buf = new Uint8Array( sample ).buffer; // ArrayBuffer
25console.log( buf );
26var rslt = convertArrayBufferToHexArray(buf);
27console.log( rslt );
28var dump = convertHexArrayToDumpData(rslt);
29console.log( dump );

投稿2020/08/29 08:11

編集2020/08/30 05:32

AkitoshiManabe

総合スコア5434

xmg

2020/08/30 03:49

ご回答ありがとうございました。読み込むファイルは　１つだけなので、見本となるコードをそのままコピーして使用しました。従って、FileList を取得する理由そのものが存在しないのではないかと思われますが、どのような訂正をすれば、下記のコードが動くのかがまだ何も分かりません。コードの訂正方法をご指導いただければ幸いです。

AkitoshiManabe

2020/08/30 04:03

> FileList を取得する理由「DOM の実装でFileListを取得する」のが理由です（必ず取得されるわけです）。考え方は Listと名が付くように、Arrayのように扱います（[...ev.target.files]）。 Fileが１つの場合、 forEach() でのループの処理（コールバック関数の処理）に着目してください。 MDNのコードサンプルのようにfor ループで files[0] を使う箇所がありますが、FileListは「添字」でもアクセスできます。

行動規範の内容に同意します