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

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

関連記事

no image

動画を埋め込むHTML要素<video>の使い方

動画を埋め込む 以下のようにsrc属性に埋め込みたい動画のURLを指定することで動画を埋め込むことができます。 <video src="movie.mp4"></ …

no image

JavaScriptで配列やオブジェクトの一部を代入する分割代入

JavaScriptで変数に配列やオブジェクトから値を代入する際に、左辺の変数名に角括弧[]を付けることで配列やオブジェクトの一部のみ代入することが可能です。 以下の例では変数aに右辺の配列の内最初の …

no image

タッチジェスチャーを実装するJavaScriptライブラリHammer.jsの使い方

こんにちは、今日はWebサイトにタッチジェスチャーを実装することができるJavaScriptライブラリ、Hammer.jsの使い方についてまとめていきます。 イベントの設定方法 通常のJavaScri …

no image

JavaScriptでMath.jsを用いて階乗の計算をする

math.permutations関数の引数に任意の数値を渡すと、その階乗の値が返されます。また、第二引数にサブセットの値を渡すと、そこまでの計算結果が返されます。 <html> < …

no image

JavaScriptで処理時間を計測する

performance.now関数を用いて処理時間を計測します。計測したい処理の実行前後にperformance.now関数でtime originからの経過時間を取得し、その差を比較します。 DOM …