Fileオブジェクトとは何かとその使用方法を確認してください
ブラウザは私たちにFile
オブジェクト。
Fileオブジェクトはブロブオブジェクトであり、その上に3つのプロパティを提供します。
name
(aストリング)lastModified
(UNIXタイムスタンプ最終変更日時の)
合計すると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!