Table of Contents
サンプル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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行目
1 | const input = document.querySelector('input'); |
querySelector関数で文書内の最初のinput要素を取得しています。
6,7行目
1 | var fileList = event.target.files; |
選択したファイルのリストであるFileListオブジェクトを取得しています。
1 | 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
