<input type="file">
<input> 要素の type="file" 型は、ユーザーが一つまたは複数のファイルを端末のストレージから選択することができるようにします。選択されると、ファイルはフォーム投稿を使用してサーバーにアップロードしたり、JavaScript コードとファイル API を使用して操作したりすることができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 2 | 12 | 3 | 4 | 18 | 3 | |
| HTML 属性 | ||||||
| input 要素の type="file" 型は、ユーザーが一つまたは複数のファイルを端末のストレージから選択することができるようにします。選択されると、ファイルはフォーム投稿を使用してサーバーにアップロードしたり、JavaScript コードとファイル API を使用して操作したりすることができます。 | 1 | 12 | 1 | 1 | 18 | 1 |
注釈 1件
実装メモ
- すべてのモダンブラウザで、`HTMLInputElement.files`の値を設定したり、取得したりすることができます。これはFirefoxのバージョン57で追加されました（バグ1384030を参照）。
基本構文
HTML
<label>File selection:
<input type="file" accept="image/*">
</label>
<label>Multiple files:
<input type="file" multiple accept=".pdf,.doc,.docx">
</label>ライブデモ
実務での使いどころ
-
<input type="file"> の活用
<input> 要素の type="file" 型は、ユーザーが一つまたは複数のファイルを端末のストレージから選択することができるようにします。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。