Table of Contents
サンプル
<input type="file">
<script>
const input = document.querySelector('input');
input.addEventListener('change', (event) => {
var fileList = event.target.files;
var file = fileList[0];
console.log('lastModified : ' + file.lastModified);
console.log('lastModifiedDate : ' + file.lastModifiedDate);
console.log('name : ' + file.name);
console.log('size : ' + file.size);
console.log('type : ' + file.type);
});
</script>
4行目
const input = document.querySelector('input');
querySelector関数で文書内の最初のinput要素を取得しています。
6,7行目
var fileList = event.target.files;
選択したファイルのリストであるFileListオブジェクトを取得しています。
var file = fileList[0];
FileListオブジェクトの先頭のFileオブジェクトを取得しています。
9～13行目
Fileオブジェクトのデータをコンソールに出力しています。
| プロパティ | 内容 |
| lastModified | ファイルの最終更新時刻（1970年 1月1日 00:00からの経過ミリ秒） |
| lastModifiedDate | ファイルの最終更新時刻（Dateオブジェクト形式） |
| name | ファイル名 |
| size | ファイルサイズ（バイト単位） |
| type | ファイルのMIMEタイプ |
リンク
File API
https://www.w3.org/TR/FileAPI/
File – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/File
Blob – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Blob
Document.querySelector() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector
HTMLElement: change イベント – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/change_event
