<input type="file" multiple>
<input type="file" multiple> はユーザーが複数のファイルを一度に選択できるファイル入力を作成します。
概要
<input type="file" multiple> はユーザーが複数のファイルを一度に選択できるファイル入力を作成します。
対応ブラウザ
デスクトップ
Chrome 2+
Edge 12+
Safari 4+
Firefox 3.6+
モバイル
Chrome Android 18+
Safari iOS 3.2+
Firefox Android 4+
基本構文
JAVASCRIPT
<label>ファイルを選択(複数可):
<input type="file" multiple accept="image/*">
</label>
<script>
document.querySelector('input[type=file]').addEventListener('change', (e) => {
console.log('選択数:', e.target.files.length);
});
</script> 実務での使いどころ
-
<input type="file" multiple> の活用
複数ファイル選択対応のinput[type=file]。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。