From 368fa213d4c0b1a09bb5a9a3235944cfad693919 Mon Sep 17 00:00:00 2001 From: chengpeiquan Date: Sun, 23 May 2021 18:10:10 +0800 Subject: docs(HTMLInputElement): add the translated content for webkitdirectory --- .../htmlinputelement/webkitdirectory/index.html | 142 +++++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.html (limited to 'files/zh-cn') diff --git a/files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.html b/files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.html new file mode 100644 index 0000000000..b05acb9413 --- /dev/null +++ b/files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.html @@ -0,0 +1,142 @@ +--- +title: HTMLInputElement.webkitdirectory +slug: Web/API/HTMLInputElement/webkitdirectory +tags: +- API +- File System API +- File and Directory Entries API +- Files +- HTML DOM +- HTMLInputElement +- Non-standard +- Property +- Reference +- Web +- webkitdirectory +translation_of: Web/API/HTMLInputElement/webkitdirectory +--- +

{{APIRef("HTML DOM")}}{{non-standard_header}}

+ +

+ HTMLInputElement.webkitdirectory是属于{{HTMLElement("input")}}元素的一个HTML属性{{htmlattrxref("webkitdirectory", "input")}}，它指示<input>元素应该允许用户选择文件目录，而不是文件。当一个文件目录被选中，该目录及其整个内容层次结构将包含在所选项目集里面。可以使用{{domxref("HTMLInputElement.webkitEntries", + "webkitEntries")}}属性获取选定的文件系统条目。

+ +

语法

+ +
 HTMLInputElement.webkitdirectory = boolValue
+ +

值

+ +

一个布尔值; 如果设置为true，则{{HTMLElement("input")}}元素只允许选择目录；如果设置为false，则只允许选择文件。

+ +

了解结果

+ +

在用户进行选择后，files里的每个{{domxref("File")}}对象都会将其拥有的{{domxref("File.webkitRelativePath")}}属性设置为所选目录内文件所在的相对路径。例如，考虑以下文件系统：

+ + + +

如果用户选择了PhotoAlbums，则文件列表上将会包含上面列出的每个文件的{{domxref("File")}}对象，而不是文件目录。条目PIC2343.jpg的webkitRelativePath属性将会得到PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg的值。即使{{domxref("FileList")}}是扁平的，这也使得知道层次结构成为可能。

+ +
+

注意：在Chromium < 72里，webkitRelativePath的行为表现有所不同。有关更多详细信息，请参见此bug。

+
+ +

示例

+ +

在这个例子中，提供了一个目录选择器，它使用户可以选择一个或多个目录。当{{event("change")}}事件被触发的时候，将生成并显示所选目录层次结构中包含的所有文件的列表。

+ +

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);
+
+ +

结果

+ +

{{ EmbedLiveSample('Example') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('File System API', '#dom-htmlinputelement-webkitdirectory', + 'webkitdirectory') }}{{ Spec2('File System API') }}Initial specification.
+ +

这个API没有官方的W3C或者WHATWG规范。

+ +

浏览器兼容性

+ +

{{Compat("api.HTMLInputElement.webkitdirectory")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf