HTMLInputElement.webkitdirectory

在此页

句法
Understanding the results
范例
规范
浏览器兼容性
另请参阅
相关话题

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

HTMLInputElement.webkitdirectory is a property that reflects the webkitdirectory HTML attribute and indicates that the <input> element should let the user select directories instead of files. When a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items. The selected file system entries can be obtained using the webkitEntries 特性。

句法

 HTMLInputElement.webkitdirectory = boolValue

值

A Boolean; true 若 <input> element should allow picking only directories or false if only files should be selectable.

Understanding the results

After the user makes a selection, each File object in 文件 有它自己的 File.webkitRelativePath property set to the relative path within the selected directory at which the file is located. For example, consider this file system:

PhotoAlbums
- Birthdays
  - Jamie's 1st birthday
    - PIC1000.jpg
    - PIC1004.jpg
    - PIC1044.jpg
  - Don's 40th birthday
    - PIC2343.jpg
    - PIC2344.jpg
    - PIC2355.jpg
    - PIC2356.jpg
- Vacations
  - Mars
    - PIC5533.jpg
    - PIC5534.jpg
    - PIC5556.jpg
    - PIC5684.jpg
    - PIC5712.jpg

If the user chooses PhotoAlbums , then the list reported by files will contain File objects for every file listed above—but not the directories. The entry for PIC2343.jpg will have a webkitRelativePath of PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg . This makes it possible to know the hierarchy even though the FileList is flat.

注意： 行为在 webkitRelativePath is different in Chromium < 72 。见 this bug 进一步了解细节。

范例

In this example, a directory picker is presented which lets the user choose one or more directories. When the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed.

HTML 内容

<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>

JavaScript 内容

document.getElementById("filepicker").addEventListener("change", function(event) {
  let output = document.getElementById("listing");
  let files = event.target.files;
  for (let i=0; i<files.length; i++) {
    let item = document.createElement("li");
    item.innerHTML = files[i].webkitRelativePath;
    output.appendChild(item);
  };
}, false);

结果

规范

规范	状态	注释
文件和目录条目 API The definition of 'webkitdirectory' in that specification.	草案	最初的规范。

此 API 没有正式的 W3C 或 WHATWG (Web 超文本应用程序技术工作组) 规范。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`webkitdirectory` 非标	Chrome 13	Edge 13	Firefox 50	IE No	Opera No	Safari 11.1	WebView Android Yes	Chrome Android Yes	Firefox Android 50	Opera Android No	Safari iOS 11.3	Samsung Internet Android Yes

在此页

句法

值

Understanding the results

范例

HTML 内容

JavaScript 内容

结果

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题