ファイルオブジェクト

Fileオブジェクトとは何かとその使用方法を確認してください

ブラウザは私たちにFileオブジェクト。

Fileオブジェクトはブロブオブジェクトであり、その上に3つのプロパティを提供します。

合計するとBlobオブジェクトのプロパティ:

  • size(バイト単位のサイズ)
  • type(MIMEタイプ)

あなたは受け取りますFileと対話するときのオブジェクトFileListオブジェクト。HTMLフォームから取得できます。<input type="file" />要素、またはと対話するときドラッグアンドドロップ

あなたが得たときFileListオブジェクト、ループするとき、または要素を選択するとき(たとえば、myFileList[0])あなたは得るでしょうFileオブジェクト。

あなたが持っていると言うinput type="file"フォームの要素:

<input type="file" />

今、あなたは聞くことができますchangeこの要素のイベントなので、ファイルを選択すると、そのファイルに関する情報が表示されます。document.querySelector('input').filesを返しますFileList上で説明したように、オブジェクトを使用します[0]最初のファイルが読み込まれ、必要なすべてのプロパティにアクセスできます。Fileオブジェクト:

document.querySelector('input').addEventListener('change', () => {
  const file = document.querySelector('input').files[0]
  alert(`The file ${file.name} was last modified on ${new Date(file.lastModified).toDateString()}`)
})

ペンを見るファイルオブジェクトのデモフラビオ・コープス(@flaviocopes) オンCodePen

Tech Wiki Online!