teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

追記

2020/08/30 05:32

投稿

AkitoshiManabe
AkitoshiManabe

スコア5434

answer CHANGED
@@ -12,4 +12,38 @@
12
12
  3. FileReader で内容を読む
13
13
 
14
14
  ----
15
- CODEPEN [FileReaderでダンプ表示](https://codepen.io/AkitoshiManabe/pen/YzqQZgV?editors=1010)
15
+ CODEPEN [FileReaderでダンプ表示](https://codepen.io/AkitoshiManabe/pen/YzqQZgV?editors=1010)
16
+
17
+ 追記)
18
+ コールバックによるネストが読みにくい場合、機能を細分化して実装しても良いかもしれません。
19
+ ```javascript
20
+ function convertArrayBufferToHexArray (buf) {
21
+ let
22
+ u = new Uint8Array(buf),
23
+ r = new Array(u.length),
24
+ i = u.length
25
+ ;
26
+ while ( i-- )
27
+ r[i] = u[i].toString(16).padStart(2,"0");
28
+ return r;
29
+ }
30
+
31
+ function convertHexArrayToDumpData (hexChrs) {
32
+ return hexChrs.reduce( function(a,c,i) {
33
+ let m = i % 16; // modulo
34
+ if( i && m === 0 ) a += "\n";
35
+ a += (m === 0 ? "": " ") + c;
36
+ return a;
37
+ },"");
38
+ }
39
+
40
+ // 以下、ユーザ関数の動作確認
41
+ var sample = "2020 August hello world".match(/./g).map(s => s.charCodeAt(0));
42
+ console.log( sample );
43
+ var buf = new Uint8Array( sample ).buffer; // ArrayBuffer
44
+ console.log( buf );
45
+ var rslt = convertArrayBufferToHexArray(buf);
46
+ console.log( rslt );
47
+ var dump = convertHexArrayToDumpData(rslt);
48
+ console.log( dump );
49
+ ```

1

加筆

2020/08/30 05:32

投稿

AkitoshiManabe
AkitoshiManabe

スコア5434

answer CHANGED
@@ -7,7 +7,8 @@
7
7
  冒頭のページも再確認し、イベント発火の順番、処理手順を確認してください。
8
8
 
9
9
  1. ``input[type="file"]`` のイベントで FileList を取得
10
+ 2. ``input[type="file"]``選択後のプロパティ``files``(FileList) から File を取得
10
- 2. FileList から File を取得
11
+ (ファイルが1つの場合も、FileListとして渡される)
11
12
  3. FileReader で内容を読む
12
13
 
13
14
  ----