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

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方

Exif.jshttps://github.com/exif-js/exif-js 使い方 ここではローカルサーバーに配置したHTMLファイルから使用します。fileプロトコルでアクセスしている場合は …

no image

チャートを簡単に追加できるJavaScriptライブラリChart.jsの使い方

折れ線グラフ、棒グラフ、レーダーチャート、ドーナツチャート、円グラフ、ポーラチャート、バブルチャート、散布図等のチャートをWebサイトに簡単に追加することができます。 公式サイト https://ww …

no image

JavaScriptで処理時間を計測する

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

no image

JavaScriptで値を素因数分解する

以下のコードでは、渡された値を素因数分解して文字列で結果を返す関数primeFactorizationを定義しています。 function primeFactorization(value) { va …

no image

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

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