<input type="file" multiple>
論理属性の multiple 属性は、設定されている場合、フォームコントロールが 1 つ以上の値を受け入れることを意味します。この属性は email と file の入力型と <select> に対して有効です。ユーザーが複数の値を選択する方法は、フォームコントロールに依存します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 2 | 12 | 3.6 | 4 | 18 | 3.2 | |
| HTML 属性 | ||||||
| 論理属性の multiple 属性は、設定されている場合、フォームコントロールが 1 つ以上の値を受け入れることを意味します。この属性は input/email と input/file の入力型と select に対して有効です。ユーザーが複数の値を選択する方法は、フォームコントロールに依存します。 | 2 | 12 | 3.6 | 4 | 18 | 3.2 |
| DOM API | ||||||
| webkitEntries は HTMLInputElement インターフェイスの読み取り専用プロパティで、ユーザーが input 要素の file 型を用いて選択したファイルやディレクトリーを表す、ファイルシステムの項目（FileSystemEntry に基づくオブジェクト）の配列を含みます。その選択がドラッグ & ドロップで行われた場合にのみ、ダイアログ内でファイルを選択しても、プロパティは空になります。 | 22 | 79 | 50 | 11.1 | 25 | 11.3 |
基本構文
JAVASCRIPT
<label>Select files (multiple selections allowed):
<input type="file" multiple accept="image/*">
</label>
<script>
document.querySelector('input[type=file]').addEventListener('change', (e) => {
console.log('選択数:', e.target.files.length);
});
</script>ライブデモ
Multiplefileselection
Multiple attribute in multiplefile simultaneous to selectionpossible to.
プレビュー全画面表示
実務での使いどころ
-
<input type="file" multiple> の活用
論理属性の multiple 属性は、設定されている場合、フォームコントロールが 1 つ以上の値を受け入れることを意味します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。