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

JavaScriptで0埋めする方法

こんにちは、今日はJavaScriptで0埋めする方法についてまとめていきます。 0埋め 以下のような関数で第一引数に0埋めしたい数値を、第二引数に数値の桁数を指定すると、指定桁数になるように0埋めさ …

no image

D3.jsベースのJavaScriptチャートライブラリC3.jsの使い方

公式サイト https://c3js.org/ サンプルコード Getting Startedページのサンプルを動かしてみます。https://c3js.org/gettingstarted.html …

no image

JavaScriptでスタックトレースを出力する関数Console.trace

console.trace()を実行するとコンソールにスタックとレースを出力することができます。 function test1() { test2(); } function test2() { co …

no image

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

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

no image

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

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