<input type="file" webkitdirectory>
メモ: この機能はウェブワーカー内で利用可能です。
webkitRelativePath は File インターフェイスの読み取り専用プロパティで、<input> 要素に webkitdirectory 属性が設定されている場合に、ユーザーが選択したディレクトリーに対するファイルのパスを指定する文字列を保持します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 13 | 13 | 50 | 11.1 | 18 | 11.3 | |
| HTML 属性 | ||||||
webkitdirectory 非標準 | 7 | 13 | 50 | 11.1 | 132 | 18.4 |
| DOM API | ||||||
| HTMLInputElement.webkitdirectory はプロパティで、 webkitdirectory という HTML 属性の値を反映し、 input 要素によってユーザーがファイルの代わりにディレクトリーを選択できることを示します。 ディレクトリーが選択された場合、ディレクトリーとその内容の階層構造が選択されたアイテムのセットに含まれます。 選択されているファイルシステムの項目は、 HTMLInputElement.webkitEntries を使用して受け取ることができます。 | 7 | 13 | 50 | 11.1 | 132 | 18.4 |
注釈 4件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (132)
実装メモ
- Chrome for Android 131で、ディレクトリを選択するとブラウザがクラッシュする（バグ376834374を参照）。
- バージョン131以前では、ユーザーはディレクトリを選択できず、個々のファイルしか選択できませんでした（バグ40248532を参照してください）。
注釈 1件
実装メモ
- バージョン18.4以前では、属性は設定できますが、ユーザはディレクトリを選択できず、個々のファイルしか選択できませんでした（バグ271705を参照）。
注釈 5件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (132)
- このバージョンで機能が削除されました (131)
実装メモ
- Chrome for Android 131で、ユーザーがディレクトリを選択するとブラウザがクラッシュする（バグ376834374を参照）。
- プロパティは属性を反映しますが、ユーザはディレクトリを選択できず、個々のファイルしか選択できません（バグ40248532を参照）。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (18.4)
実装メモ
- このプロパティは設定できますが、効果はありません（バグ271705を参照）。
基本構文
JAVASCRIPT
<label>Select a folder:
<input type="file" webkitdirectory multiple>
</label>
<script>
input.addEventListener('change', (e) => {
for (const file of e.target.files) {
console.log(file.webkitRelativePath);
}
});
</script>ライブデモ
Directory picker
Select a folder and list the relative paths exposed by webkitRelativePath.
プレビュー全画面表示
実務での使いどころ
-
<input type="file" webkitdirectory> の活用
メモ: この機能はウェブワーカー内で利用可能です。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。