Javascriptで「.bin」ファイルを読み込み

Question

JavascriptでDrag＆Dropでファイルを読み込ませています。
（chrome:80.0.3987.149で動作させています。）
.txtや.jsonは問題なく読み込めますが、「.bin」ファイルを読み込みだけが失敗します。

以下のようなプログラムで、「.bin」ファイルを入れた場合のみlength=0で読み込みできません。
（.txtや.jsonはファイル数がlengthに入っています。）
バイナリファイルを読み込むのは何か方法が必要なのか、わかりません。
.binファイルを読み込む方法についてご教授ください。

loadfile (event) {
  const fileList = event.target.files || event.dataTransfer.files
  console.log(fileList.length)
  console.log(fileList)

Comments

[m.ts10806]

念のため、対象ファイルのファイルサイズを教えてください。

[yamayamak]

.binファイルは25Kbyteでした。

[m.ts10806]

その、念のため、ファイル指定するところ含めてご提示いただけますか？
コピペで確認できるものが良いです。

[yamayamak]

大変ありがとうございます。申し訳ありません。
Vue.jsで作成していたので、Javascriptのみで作成していたら、なぜかVue.jsでも問題なくなりました。
おさがわせしました。協力ありがとうございましたm(_ _)m

Answer 1

fileList を ループで回し、 FileReader で読む方法が使えます。

FileReader.readAsArrayBuffer() で取得するとバイナリデータを扱いやすいはずです。

Comments

[yamayamak]

ありがとうございます。ファイル自体が取得できないですが。。。

[AkitoshiManabe]

ドロップ時のイベントリスナでは、dropEffect の設定が必要です。
evt.dataTransfer.dropEffect = 'copy';

https://developer.mozilla.org/ja/docs/DragDrop/Drag_Operations

[yamayamak]

大変ありがとうございます。申し訳ありません。
Vue.jsで作成していたので、Javascriptのみで作成していたら、なぜかVue.jsでも問題なくなりました。
おさがわせしました。協力ありがとうございましたm(_ _)m

Answer 2

大変ありがとうございます。申し訳ありません。
なぜかいろいろしていたら問題なくなりましたm(_ _)m