<input type="file" webkitdirectory>
input[type=file] の webkitdirectory 属性により、ユーザーはファイル単位ではなくディレクトリ全体を選択できます。
概要
input[type=file] の webkitdirectory 属性により、ユーザーはファイル単位ではなくディレクトリ全体を選択できます。
対応ブラウザ
デスクトップ
Chrome 13+
Edge 13+
Safari 11.1+
Firefox 50+
モバイル
Chrome Android 132+
Safari iOS 18.4+
Firefox Android 142+
基本構文
JAVASCRIPT
<label>フォルダを選択:
<input type="file" webkitdirectory multiple>
</label>
<script>
input.addEventListener('change', (e) => {
for (const file of e.target.files) {
console.log(file.webkitRelativePath);
}
});
</script>実務での使いどころ
-
<input type="file" webkitdirectory> の活用
webkitdirectory属性。ディレクトリ単位でファイルを選択する機能。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。