3テラバイト

プログラム関連備忘録サイト。主にゲーム。

HTML JavaScript

File APIでinput要素で選択したファイルの情報を確認する

投稿日:

サンプル

<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

-HTML, JavaScript


comment

メールアドレスが公開されることはありません。

関連記事

no image

ブラウザのコンソールからページ内のリンクリストを確認する

ブラウザのコンソールにdocument.linksの内容を出力すると、現在の文書内にあるリンクのリストが返され、任意の要素をクリックでそのリンクを確認することができます。 console.log(do …

no image

JavaScriptで位置座標を取得する

navigator.geolocation.getCurrentPosition関数で取得できます。 引数には成功時、失敗時のコールバック関数と、オプションを渡します。 <html> &l …

no image

カルーセルを実装するjQueryプラグインslickの使い方

こんにちは、今日はカルーセルを実行できるjQueryプラグイン、slickの使い方についてまとめていきます。 公式サイト https://kenwheeler.github.io/slick/ ダウン …

no image

inputタグで選択した画像をimgタグに表示する

コード input要素で画像を選択した際に、選択した画像をimg要素に表示するサンプルコードです。 URL.createObjectURL()を使用する FileReader.readAsDataUR …

no image

JavaScriptで指定時間ごとに処理を実行する

指定時間ごとに処理を実行する setInterval関数の第一引数に指定時間経過ごとに実行したいコールバック関数を、第二引数に待機時間をミリ秒で指定します。 以下の例では関数callbackFuncを …