HTMLInputElement: files プロパティ
HTMLInputElement.files
プロパティを通じて、<input type="file">
要素で選択された FileList
にアクセスできます。
値
選択されているファイルがあれば、それをリストする FileList
オブジェクトです。HTMLInputElement
が type="file"
でない場合は、null
が返ります。
例
以下の例は、HTMLInputElement.files
プロパティにアクセスして、ユーザーが選択したそれぞれのファイルの名前、更新日時、サイズ、種類を出力する方法を示します。
HTML
html
<input id="files" type="file" multiple />
JavaScript
HTMLInputElement.files
は、ファイルが選択されていなくても FileList
を返すことに注意してください。
この性質があるため、ファイルが選択されているかをチェックせずに for...of
で走査しても安全です。
js
const fileInput = document.getElementById("files");
console.log(fileInput.files instanceof FileList); // 空でも true となる
for (const file of fileInput.files) {
console.log(file.name); // ファイル名を表示
let fileDate = new Date(file.lastModified);
console.log(fileDate.toLocaleDateString()); // 日付を表示
console.log(
file.size < 1000 ? file.size : Math.round(file.size / 1000) + "KB",
);
console.log(file.type); // MIME タイプを表示
}
仕様書
Specification |
---|
HTML Standard # dom-input-files-dev |
ブラウザーの互換性
BCD tables only load in the browser