JavaScriptでファイル選択ダイアログを表示させる方法！

JavaScriptでファイル選択ダイアログを表示させて、ファイルを送信する際にそのファイルが正しいものか確認したいケースを考えます。

以下の項目でJavaScriptでファイル選択ダイアログを表示させる方法について見ていきましょう。

JavaScriptでファイル選択ダイアログを表示させるにinput要素のfilesプロパティを用います。

では複数ファイルを選択できるものとして、filesプロパティを用いたサンプルコードを用意したので確認してみましょう。

上記のサンプルコードのプレビュー上でファイルを選択していただくと、ファイル名が表示されることが分かります。

コードとしては、HTMLでtypeをfileとしているinput要素を取得し、それに対してfilesプロパティを用いています。

そしてサンプルコードではfilesプロパティに属しているnameプロパティを用いて、ファイル名を表示させています。

filesプロパティはnameプロパティ以外に以下のプロパティを持っています。
 

lastModifiedDate

ファイルの最終更新時刻の Date を返します

size

ファイルサイズ(単位はバイト)

type

ファイルの MIME タイプ

いかがでしたでしょうか？

ぜひここで紹介した方法を用いて、JavaScriptでファイル選択ダイアログを表示させてみてください。