Widely available すべての主要ブラウザで対応済み。安心して使用可能。

概要

<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]。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。