HTMLでファイルアップロードする方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでファイルアップロードする方法について、アップロードの基本とファイル形式の制限、複数ファイルの選択に分け、簡単に解説していきます。

アップロードの基本

input要素のtype属性をfileにするとファイルがアップロードできます。

formタグと一緒に使うことで、サーバ側に選択したファイルを送ることが可能です。

<input type="file" name="hoge">

上記のコードでは、name属性がhogeのファイル選択が可能なinput要素を表示しています。

ファイル形式の制限

input要素でのファイル選択では、ファイルの形式を制限することができます。

input要素のaccept属性に選択許可するファイルの拡張子をカンマ区切りで指定します。

<input type="file" name="hoge" accept=".png,.jpg,.jpeg">

上記のコードでは、拡張子がpngとjpg、jpegのファイル選択が可能なinput要素を表示しています。

複数ファイルの選択

input要素でのファイル選択では、複数のファイルを選択させることができます。

input要素のmultiple属性を値なしで指定することで、複数ファイルの選択を許容します。

<input type="file" name="hoge" multiple>

上記のコードでは、ファイル選択ダイアログで、複数のファイル選択が可能なinput要素を表示しています。