From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/file/file/index.html | 112 +++++ files/zh-cn/web/api/file/filename/index.html | 16 + files/zh-cn/web/api/file/filesize/index.html | 16 + files/zh-cn/web/api/file/getasbinary/index.html | 42 ++ files/zh-cn/web/api/file/getasdataurl/index.html | 59 +++ files/zh-cn/web/api/file/getastext/index.html | 45 ++ files/zh-cn/web/api/file/index.html | 101 ++++ files/zh-cn/web/api/file/lastmodified/index.html | 134 ++++++ .../zh-cn/web/api/file/lastmodifieddate/index.html | 22 + files/zh-cn/web/api/file/mozfullpath/index.html | 6 + files/zh-cn/web/api/file/name/index.html | 22 + files/zh-cn/web/api/file/size/index.html | 30 ++ files/zh-cn/web/api/file/type/index.html | 114 +++++ .../using_files_from_web_applications/index.html | 536 +++++++++++++++++++++ .../web/api/file/webkitrelativepath/index.html | 126 +++++ 15 files changed, 1381 insertions(+) create mode 100644 files/zh-cn/web/api/file/file/index.html create mode 100644 files/zh-cn/web/api/file/filename/index.html create mode 100644 files/zh-cn/web/api/file/filesize/index.html create mode 100644 files/zh-cn/web/api/file/getasbinary/index.html create mode 100644 files/zh-cn/web/api/file/getasdataurl/index.html create mode 100644 files/zh-cn/web/api/file/getastext/index.html create mode 100644 files/zh-cn/web/api/file/index.html create mode 100644 files/zh-cn/web/api/file/lastmodified/index.html create mode 100644 files/zh-cn/web/api/file/lastmodifieddate/index.html create mode 100644 files/zh-cn/web/api/file/mozfullpath/index.html create mode 100644 files/zh-cn/web/api/file/name/index.html create mode 100644 files/zh-cn/web/api/file/size/index.html create mode 100644 files/zh-cn/web/api/file/type/index.html create mode 100644 files/zh-cn/web/api/file/using_files_from_web_applications/index.html create mode 100644 files/zh-cn/web/api/file/webkitrelativepath/index.html (limited to 'files/zh-cn/web/api/file') diff --git a/files/zh-cn/web/api/file/file/index.html b/files/zh-cn/web/api/file/file/index.html new file mode 100644 index 0000000000..efa7b30382 --- /dev/null +++ b/files/zh-cn/web/api/file/file/index.html @@ -0,0 +1,112 @@ +--- +title: File.File() +slug: Web/API/File/File +translation_of: Web/API/File/File +--- +

{{APIRef("File")}}

+ +

File() 构造器创建新的 {{domxref("File")}} 对象实例。

+ +

语法

+ +
var myFile = new File(bits, name[, options]);
+ +

参数

+ +
+
bits
+
一个包含{{jsxref("ArrayBuffer")}}，{{domxref("ArrayBufferView")}}，{{domxref("Blob")}}，或者 {{domxref("DOMString")}} 对象的 {{jsxref("Array")}} — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。
+
name
+
{{domxref("USVString")}}，表示文件名称，或者文件路径。
+
options {{optional_inline}}
+
选项对象，包含文件的可选属性。可用的选项如下： +
    +
  • type: {{domxref("DOMString")}}，表示将要放到文件中的内容的 MIME 类型。默认值为 "" 。
    • +
  • lastModified: 数值，表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 {{jsxref("Date.now()")}}。
    • +
+
+
+ +

示例

+ +
var file = new File(["foo"], "foo.txt", {
+  type: "text/plain",
+});
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API')}}{{Spec2('File API')}}Initial definition
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{CompatVersionUnknown}}{{CompatGeckoDesktop("7")}}10.011.56.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("7")}}{{CompatNo}}11.16.0
+
+ +

另见

+ + diff --git a/files/zh-cn/web/api/file/filename/index.html b/files/zh-cn/web/api/file/filename/index.html new file mode 100644 index 0000000000..4a1a83889e --- /dev/null +++ b/files/zh-cn/web/api/file/filename/index.html @@ -0,0 +1,16 @@ +--- +title: File.fileName +slug: Web/API/File/fileName +translation_of: Web/API/File/fileName +--- +
+

{{APIRef("File API") }}{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+
+ +

概述

+ +

返回文件的名称.由于安全原因,返回的值并不包含文件路径.

+ +
该属性已经废弃.请使用{{domxref("File.name")}}来代替.
diff --git a/files/zh-cn/web/api/file/filesize/index.html b/files/zh-cn/web/api/file/filesize/index.html new file mode 100644 index 0000000000..a434d9db7c --- /dev/null +++ b/files/zh-cn/web/api/file/filesize/index.html @@ -0,0 +1,16 @@ +--- +title: File.fileSize +slug: Web/API/File/fileSize +translation_of: Web/API/File/fileSize +--- +
+

{{APIRef("File API") }}{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+
+ +

概述

+ +

返回文件的大小,单位为字节.

+ +
该属性已经废弃,请使用{{domxref("File.size")}}来代替.
diff --git a/files/zh-cn/web/api/file/getasbinary/index.html b/files/zh-cn/web/api/file/getasbinary/index.html new file mode 100644 index 0000000000..172d8d3a41 --- /dev/null +++ b/files/zh-cn/web/api/file/getasbinary/index.html @@ -0,0 +1,42 @@ +--- +title: File.getAsBinary +slug: Web/API/File/getAsBinary +translation_of: Web/API/File/getAsBinary +--- +

{{APIRef("File API")}}

+ +

概述

+ +

将文件内容按照原始二进制形式解析成字符串并返回.

+ +

示例

+ +
// fileInput是一个HTMLInputElement元素: <input type="file" id="myfileinput" multiple>
+var fileInput = document.getElementById("myfileinput");
+
+// files是一个FileList对象(类似于NodeList)
+var files = fileInput.files;
+
+// 一个对象,包含了允许的MIME类型
+var accept = {
+    binary : ["image/png", "image/jpeg"],
+    text :   ["text/plain", "text/css", "application/xml", "text/html"]
+};
+
+var file;
+
+for (var i = 0; i < files.length; i++) {
+    file = files[i];
+
+    // 如果文件的类型能够被检测到
+    if (file !== null) {
+        if (accept.binary.indexOf(file.type) > -1) {
+            // file是个可接受的二进制文件
+            var data = file.getAsBinary();
+        } else if (accept.text.indexOf(file.type) > -1) {
+            // file是个可接受的文本文件
+            var data = file.getAsText();
+            // 使用字符串方法处理data
+        }
+    }
+}
diff --git a/files/zh-cn/web/api/file/getasdataurl/index.html b/files/zh-cn/web/api/file/getasdataurl/index.html new file mode 100644 index 0000000000..7f72b124d0 --- /dev/null +++ b/files/zh-cn/web/api/file/getasdataurl/index.html @@ -0,0 +1,59 @@ +--- +title: File.getAsDataURL() +slug: Web/API/File/getAsDataURL +translation_of: Web/API/File/getAsDataURL +--- +
{{APIRef("File API") }}
+ +

{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+ +

概述

+ +

getAsDataURL函数返回一个形如 data: 的 URL，这个URL包含了所涉及到的内容的编码形式。

+ +
+

注： 这个方法已经废弃，你应该使用 {{domxref("FileReader")}} 对象中的{{domxref("FileReader.readAsDataURL","readAsDataURL()")}} 方法作为替代。

+
+ +

语法

+ +
var url = instanceOfFile.getAsDataURL();
+ +

返回值

+ +

一个形如 data: 的URL字符串

+ +

范例

+ +
// fileInput 是一个 HTMLInputElement 元素: <input type="file" id="myfileinput" multiple>
+var fileInput = document.getElementById("myfileinput");
+
+// files 是一个 FileList 对象(类似 NodeList 对象)
+var files = fileInput.files;
+
+// 允许的文件格式数组
+var accept = ["image/png"];
+
+// img 是一个 HTMLImgElement 元素: <img id="myimg">
+var img = document.getElementById("myimg");
+
+// 假设我们接收第一个所选中的文件类型
+if (accept.indexOf(files[0].mediaType) > -1) {
+  // 显示图片
+  // 和 <img src="data:image/png,<imagedata>"> 效果一样
+  img.src = files[0].getAsDataURL();
+}
+
+ +

详细说明

+ +

没有其他说明

+ +

参考文章

+ + diff --git a/files/zh-cn/web/api/file/getastext/index.html b/files/zh-cn/web/api/file/getastext/index.html new file mode 100644 index 0000000000..a71b8f254e --- /dev/null +++ b/files/zh-cn/web/api/file/getastext/index.html @@ -0,0 +1,45 @@ +--- +title: File.getAsText +slug: Web/API/File/getAsText +translation_of: Web/API/File/getAsText +--- +

{{APIRef("File API")}}

+ +

概述

+ +

按照指定的编码类型将文件内容解析成字符串并返回.

+ +

示例

+ +
// fileInput是一个HTMLInputElement元素: <input type="file" id="myfileinput" multiple>
+var fileInput = document.getElementById("myfileinput");
+
+// files是一个FileList对象(类似NodeList)
+var files = fileInput.files;
+
+// 一个对象,包含了允许的MIME类型
+var accept = {
+    binary : ["image/png", "image/jpeg"],
+    text :   ["text/plain", "text/css", "application/xml", "text/html"]
+};
+
+var file;
+
+for (var i = 0; i < files.length; i++) {
+
+    file = files[i];
+
+    // 如果文件的类型能够被检测到
+   if (file !== null) {
+
+        if (accept.text.indexOf(file.mediaType) > -1) {
+
+            // file是个可接受的文本文件,使用utf-8编码读取
+            var data = file.getAsText("utf-8");
+            // 使用字符串方法处理data
+
+        } else if (accept.binary.indexOf(file.mediaType) > -1) {
+            // file是个可接受的二进制文件
+        }
+    }
+}
diff --git a/files/zh-cn/web/api/file/index.html b/files/zh-cn/web/api/file/index.html new file mode 100644 index 0000000000..d87a8ed3f0 --- /dev/null +++ b/files/zh-cn/web/api/file/index.html @@ -0,0 +1,101 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - File API + - Reference + - Web + - 文件 API +translation_of: Web/API/File +--- +
{{APIRef}}
+ +

文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

+ +

通常情况下， File 对象是来自用户在一个 {{HTMLElement("input")}} 元素上选择文件后返回的 {{domxref("FileList")}} 对象,也可以是来自由拖放操作生成的 {{domxref("DataTransfer")}} 对象，或者来自 {{domxref("HTMLCanvasElement")}} 上的 mozGetAsFile() API。在Gecko中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互（有关详细信息，请参阅{{anch("注意事项")}}。

+ +

File 对象是特殊类型的 {{domxref("Blob")}}，且可以用在任意的 Blob 类型的 context 中。比如说， {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, 及 {{domxref("XMLHttpRequest", "", "send()")}} 都能处理 Blob 和 File。

+ +

参考 从Web应用程序使用文件 了解更多信息和例子。

+ +

构造函数

+ +
+
{{domxref("File.File", "File()")}}
+
返回一个新构建的文件对象（File）。
+
+ +

属性

+ +

File 接口也继承了 {{domxref("Blob")}} 接口的属性：

+ +
+
{{domxref("File.lastModified")}} {{readonlyinline}}
+
返回当前 File 对象所引用文件最后修改时间，自 UNIX 时间起始值（1970年1月1日 00:00:00 UTC）以来的毫秒数。
+
{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}
+
返回当前 File 对象所引用文件最后修改时间的 Date 对象。
+
{{domxref("File.name")}} {{readonlyinline}}
+
返回当前 File 对象所引用文件的名字。
+
{{domxref("File.size")}} {{readonlyinline}}
+
返回文件的大小。
+
{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}
+
返回 {{domxref("File")}} 相关的 path 或 URL。
+
+ +
+
{{domxref("File.type")}} {{readonlyinline}}
+
返回文件的 多用途互联网邮件扩展类型（MIME Type）
+
+ +

方法

+ +

File 接口没有定义任何方法，但是它从 {{domxref("Blob")}} 接口继承了以下方法：

+ +
+
{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+
返回一个新的 Blob 对象，它包含有源 Blob 对象中指定范围内的数据。
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态注释
{{SpecName('File API')}}{{Spec2('File API')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("api.File")}}

+ +

注意事项

+ + + +

参见

+ + diff --git a/files/zh-cn/web/api/file/lastmodified/index.html b/files/zh-cn/web/api/file/lastmodified/index.html new file mode 100644 index 0000000000..3f0a31de7c --- /dev/null +++ b/files/zh-cn/web/api/file/lastmodified/index.html @@ -0,0 +1,134 @@ +--- +title: File.lastModified +slug: Web/API/File/lastModified +tags: + - API + - File API + - Files +translation_of: Web/API/File/lastModified +--- +

{{APIRef("File API")}}

+ +

只读属性 File.lastModified 返回所引用文件最后修改日期， 为自 1970年1月1日0:00 以来的毫秒数。没有已知的最后修改时间则会返回当前时间。

+ +

语法

+ +
var time = instanceOfFile.lastModified;
+
+ +

值

+ +

自 1970年1月1日0:00 以来的毫秒数。

+ +

实例

+ +

从INPUT标签读取文件

+ +
<input type="file" multiple id="fileInput">
+
+ +
const fileInput = document.getElementById('fileInput');
+fileInput.addEventListener('change', function(event) {
+  // files is a FileList object (simliar to NodeList)
+  const files = event.target.files;
+
+  for (let i = 0; i < files.length; i++) {
+    const date = new Date(files[i].lastModified);
+    alert(files[i].name + ' has a last modified date of ' + date);
+  }
+});
+
+ +

结果：

+ +

{{ EmbedLiveSample('Reading_from_file_input', 300, 50) }}

+ +

动态创建文件

+ +

如果文件是动态创建的，可以在构造函数{{domxref("File.File()", "new File()")}} 中提供最后修改时间。如果未提供则会继承文件对象被创建时的{{jsxref("Date.now()")}} 。

+ +
var fileWithDate = new File([], 'file.bin', {
+  lastModified: new Date(2017, 1, 1),
+});
+console.log(fileWithDate.lastModified); //returns 1485903600000
+
+var fileWithoutDate = new File([], 'file.bin');
+console.log(fileWithoutDate.lastModified); //returns current time
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#file-attrs', 'lastModified')}}{{Spec2('File API')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
File.lastModified13.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("15.0")}}10.016.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
File.lastModified{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/file/lastmodifieddate/index.html b/files/zh-cn/web/api/file/lastmodifieddate/index.html new file mode 100644 index 0000000000..0e00981ba9 --- /dev/null +++ b/files/zh-cn/web/api/file/lastmodifieddate/index.html @@ -0,0 +1,22 @@ +--- +title: File.lastModifiedDate +slug: Web/API/File/lastModifiedDate +translation_of: Web/API/File/lastModifiedDate +--- +

{{APIRef("File API")}}

+ +

概述

+ +

返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代.

+ +

示例

+ +
// fileInput是一个HTMLInputElement元素: <input type="file" multiple id="myfileinput">
+var fileInput = document.getElementById("myfileinput");
+
+// files是一个FileList对象(类似于NodeList对象)
+var files = fileInput.files;
+
+for (var i = 0; i < files.length; i++) {
+  alert(files[i].name + " has a last modified date of " + files[i].lastModifiedDate);
+}
diff --git a/files/zh-cn/web/api/file/mozfullpath/index.html b/files/zh-cn/web/api/file/mozfullpath/index.html new file mode 100644 index 0000000000..b0ddc2929a --- /dev/null +++ b/files/zh-cn/web/api/file/mozfullpath/index.html @@ -0,0 +1,6 @@ +--- +title: File.mozFullPath +slug: Web/API/File/mozFullPath +translation_of: Web/API/File/mozFullPath +--- +

{{APIRef("File API")}}{{draft}}{{Non-standard_header}}

diff --git a/files/zh-cn/web/api/file/name/index.html b/files/zh-cn/web/api/file/name/index.html new file mode 100644 index 0000000000..a43ef5913b --- /dev/null +++ b/files/zh-cn/web/api/file/name/index.html @@ -0,0 +1,22 @@ +--- +title: File.name +slug: Web/API/File/name +translation_of: Web/API/File/name +--- +

{{APIRef("File API")}}

+ +

概述

+ +

返回文件的名称.由于安全原因,返回的值并不包含文件路径.

+ +

示例

+ +
// fileInput is a HTMLInputElement: <input type="file" multiple id="myfileinput">
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (simliar to NodeList)
+var files = fileInput.files;
+
+for (var i = 0; i < files.length; i++) {
+  alert("Filename " + files[i].name);
+}
diff --git a/files/zh-cn/web/api/file/size/index.html b/files/zh-cn/web/api/file/size/index.html new file mode 100644 index 0000000000..5ab90e8018 --- /dev/null +++ b/files/zh-cn/web/api/file/size/index.html @@ -0,0 +1,30 @@ +--- +title: File.size +slug: Web/API/File/size +translation_of: Web/API/File/size +--- +

{{APIRef("File API") }}

+ +

概述

+ +

以字节为单位返回文件的大小。

+ +

语法

+ +
var size = instanceOfFile.size
+ +

值

+ +

一个数

+ +

规范

+ +

不属于任何规范。

+ +

另请参见

+ + + +

 

diff --git a/files/zh-cn/web/api/file/type/index.html b/files/zh-cn/web/api/file/type/index.html new file mode 100644 index 0000000000..e0281d5078 --- /dev/null +++ b/files/zh-cn/web/api/file/type/index.html @@ -0,0 +1,114 @@ +--- +title: File.type +slug: Web/API/File/type +translation_of: Web/API/File/type +--- +

{{APIRef("File API")}}

+ +

返回 {{domxref("File")}} 对象所表示文件的媒体类型（MIME）。

+ +

语法

+ +
var name = file.type;
+ +

值

+ +

字符串，包含媒体类型（MIME），表示文本是什么类型，例如 PNG 图像是 "image/png"。 

+ +

示例

+ +
<input type="file" multiple onchange="showType(this)">
+
+ +
function showType(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i < files.length; i++) {
+    var name = files[i].name;
+    var type = files[i].type;
+    alert("Filename: " + name + " , Type: " + type);
+  }
+}
+ +

注： 基于当前的实现，浏览器不会实际读取文件的字节流，来判断它的媒体类型。它基于文件扩展来假设；重命名为 .txt 的 PNG 图像文件为 "text/plain" 而不是 "image/png" 。而且，file.type 仅仅对常见文件类型可靠。例如图像、文档、音频和视频。不常见的文件扩展名会返回空字符串。开发者最好不要依靠这个属性，作为唯一的验证方案。

+ +

 

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
File.name13.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}10.016.0{{CompatVersionUnknown}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
File.name{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] {{webkitbug("32912")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/file/using_files_from_web_applications/index.html b/files/zh-cn/web/api/file/using_files_from_web_applications/index.html new file mode 100644 index 0000000000..8d2a0f91aa --- /dev/null +++ b/files/zh-cn/web/api/file/using_files_from_web_applications/index.html @@ -0,0 +1,536 @@ +--- +title: 在web应用程序中使用文件 +slug: Web/API/File/Using_files_from_web_applications +tags: + - File + - File API + - ajax上传 + - 文件 + - 文件上传 +translation_of: Web/API/File/Using_files_from_web_applications +--- +

{{APIRef("File API")}}

+ +

通过使用在 HTML5 中加入到 DOM 的 File API，使在web内容中让用户选择本地文件然后读取这些文件的内容成为可能。用户可以通过HTML中的 {{HTMLElement("input/file", '<input type="file">')}} 元素或者是通过拖拽来选择本地文件。

+ +

如果你想通过扩展或者其它的chrome源码浏览器（browser chrome code）使用DOM File API，是可行的；然而，需要注意有一些附加特性。详细请见 Using the DOM File API in chrome code。

+ +

访问被选择的文件

+ +

考虑这段 HTML:

+ +
<input type="file" id="input">
+ +

通过 File API，我们可以访问 {{DOMxRef("FileList")}}，它包含了表示用户所选文件的 {{DOMxRef("File")}} 对象

+ +

如果用户只选择了一个文件，那么只需要考虑列表中的第一个文件。

+ +

使用传统的 DOM 选择器访问一个被选择的文件：

+ +
const selectedFile = document.getElementById('input').files[0];
+
+ +

通过 change 事件访问被选择的文件

+ +

可以（但不是强制的）通过 change 事件访问 {{DOMxRef("FileList")}}：

+ +
<input type="file" id="input" onchange="handleFiles(this.files)">
+ +

当用户选择一个文件时，handleFiles() 方法会用一个 {{DOMxRef("FileList")}} 对象作为参数被调用，{{DOMxRef("FileList")}} 对象包含表示用户选择的文件的 {{DOMxRef("File")}} 对象。

+ +

如果你想让用户选择多个文件，只需在 input 元素上使用 multiple 属性：

+ +
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
+ +

在这个例子中，对于每个用户选择的文件，传递给 handleFiles()方法的文件列表都包含一个对应的 {{DOMxRef("File")}} 对象。

+ +

动态添加change监听器

+ +

你需要使用 {{DOMxRef("EventTarget.addEventListener()")}} 去添加 change 事件监听器，像这样：

+ +
const inputElement = document.getElementById("input");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  const fileList = this.files; /* now you can work with the file list */
+}
+
+ +

注意在这个例子里，handleFiles() 方法本身是一个事件处理器，不像之前的例子中，它被事件处理器调用然后传递给它一个参数。

+ +

获取被选择文件的信息

+ +

DOM 提供 {{ domxref("FileList") }} 对象列出了用户选择的所有文件，每一个文件被指定为一个 {{ domxref("File") }} 对象。你可以通过检查文件列表 {{ domxref("FileList") }} 的 length 属性来确定用户选择了多少个文件：

+ +
const numFiles = files.length;
+
+ +

可以像数组一样简单地访问文件列表来检索各个 {{ domxref("File") }} 对象：

+ +
for (let i = 0, numFiles = files.length; i < numFiles; i++) {
+  const file = files[i];
+  // ...
+}
+ +

这个循环遍历了文件列表里的所有文件。

+ +

 {{ domxref("File") }} 对象提供了三个属性，包含了文件的有用信息。

+ +
+
name
+
文件名称，只读字符串。只包含文件名，不包含任何路径信息。
+
size
+
以字节数为单位的文件大小，只读的64位整数。
+
type
+
文件的 MIME 类型，只读字符串，当类型不能确定时为 ""。
+
+ +

示例：显示文件大小

+ +

下面的例子展示了 size 属性的一种可能用法：

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>File(s) size</title>
+<script>
+function updateSize() {
+  let nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (let nFileId = 0; nFileId < nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  let sOutput = nBytes + " bytes";
+  // optional code for multiples approximation
+  const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+  for (nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // end of optional code
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+</script>
+</head>
+
+<body onload="updateSize()">
+  <form name="uploadForm">
+    <div>
+      <input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple>
+      selected files: <span id="fileNum">0</span>;
+      total size: <span id="fileSize">0</span>
+    </div>
+    <div><input type="submit" value="Send file"></div>
+  </form>
+</body>
+</html>
+ +

通过 click() 方法使用隐藏的 file input 元素

+ +

你可以隐藏公认难看的 file {{ HTMLElement("input") }} 元素并显示你自己的界面来打开文件选择器，然后显示哪个或哪些文件被用户选中了。你可以通过给 input 元素添加 display:none 的样式，再调用 {{HTMLElement("input") }} 元素的 {{domxref("element.click","click()") }} 方法来实现。

+ +

考虑这段HTML：

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<button id="fileSelect">Select some files</button>
+
+ +

处理 click 事件的代码类似于这样：

+ +
const fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+}, false);
+
+ +

你可以给这个用来打开文件选择器的新按钮添加任何你想要的样式。

+ +

使用 label 元素来触发一个隐藏的 file input 元素

+ +

允许在不使用 JavaScript（click() 方法）来打开文件选择器，可以使用 {{ HTMLElement("label") }} 元素。注意在这种情况下，input 元素不能使用 display: none（或 visibility: hidden）隐藏，否则 label 将无法通过键盘访问。使用 visually-hidden technique 作为替代。

+ +

考虑这段HTML：

+ +
<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
+<label for="fileElem">Select some files</label>
+ +

和这段CSS：

+ +
.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+/* Separate rule for compatibility, :focus-within is required on modern Firefox and Chrome */
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+input.visually-hidden:focus-within + label {
+  outline: thin dotted;
+}
+
+ +

这里不需要添加任何 JavaScript 代码来调用fileElem.click()，另外，这时你也可以给 label 元素添加你想要的样式。您需要在其 label 上提供隐藏 input 字段的焦点状态的视觉提示，比如上面用的轮廓，或者背景颜色或边框阴影。（截至编写时为止，Firefox 不显示 <input type="file"> 元素的视觉提示。）

+ +

使用拖放来选择文件

+ +

你还可以让用户将文件拖拽到你的网页应用中。

+ +

第一步是创建一个drop区域。虽然你网页内容的哪部分接受拖放取决于你的应用设计，但是使一个元素接收drop事件是很容易的。

+ +
let dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+
+ +

在这个例子中，我们将ID为dropbox的元素变为了我们的drop区域。这是通过给元素添加{{event('dragenter')}}, {{event('dragover')}}, 和{{event('drop')}} 事件监听器实现的。

+ +

我们其实并不需要对dragenter and dragover 事件进行处理，所以这些函数都很简单。他们只需要包括禁止事件传播和阻止默认事件：

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+
+ +

真正的奥妙在drop()这个函数中：

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+
+ +

这里，我们从事件中获取到了dataTransfer 这个域，然后从中得到文件列表，再将它们传递给handleFiles()函数。在这之后，处理文件的方法和用input元素或者用拖拽就是一样的了。

+ +

例子：显示用户选择的图片的缩略图

+ +

比方说，你正在开发一个炫酷的下一代图片分享网站，并且想使用HTML5来展示用户在实际上传之前的图片的缩略图。你可以像我们之前讨论的那样创建自己的input元素或者drop区域，然后对他们使用一个回调函数，比如下面的handleFiles()。

+ +
function handleFiles(files) {
+  for (var i = 0; i < files.length; i++) {
+    var file = files[i];
+    var imageType = /^image\//;
+
+    if (!imageType.test(file.type)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // 假设"preview"就是用来显示内容的div
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

这里我们循环处理用户选择的文件，看每个文件的type属性是不是image（通过正则表达式来匹配MIME类型字符串模式"image/*"）。 对每个文件而言，如果它是image，我们就创建一个新的img元素。可以使用css来创建一个漂亮的边框或阴影来显示图片的具体大小，在这儿就不具体做了。

+ +

为了在DOM树中更容易地找到他们，每个图片元素都被添加了一个名为obj的CSS类。我们还给每个图片添加了file属性使它具有 {{ domxref("File") }}；这样做可以让我们拿到稍后需要实际上传的图片。我们在预览页中使用 {{ domxref("Node.appendChild()") }}来添加新的缩略图。

+ +

接下来，我们创建了{{ domxref("FileReader") }}来处理异步的图片加载并把他赋给img元素。在创建一个新的 FileReader对象后，我们新建了它的onload 函数，然后调用readAsDataURL()函数开始后台读取文件。当整个图片文件的内容都被全部加载完后，它们被转换成了一个被传递到onload回调函数的data:URL。我们再执行常规操作将img元素的src属性设置为刚刚加载完毕的URL，使得图像可以显示在用户屏幕上的缩略图中。

+ +

使用对象 URL

+ +

Gecko 2.0 {{ geckoRelease("2.0") }}引入了对DOM {{ domxref("window.URL.createObjectURL()") }} 和 {{ domxref("window.URL.revokeObjectURL()") }} 方法的支持。这使得你可以创建用于引用任何数据的简单URL字符串，也可以引用一个包括用户电脑上的本地文件的DOM {{ domxref("File") }}对象。

+ +

当你需要在HTML中通过URL来引用一个{{ domxref("File") }}对象时，你可以创建一个对象URL，就像这样：

+ +
var objectURL = window.URL.createObjectURL(fileObj);
+
+ +

这个对象URL是一个标识{{ domxref("File") }}对象的字符串。每次你调用{{ domxref("window.URL.createObjectURL()") }}，就会产生一个唯一的对象URL，即使是你对一个已创建了对象URL的文件再次创建一个对象URL。每个创建了的对象URL必须要释放。当文档关闭时，它们会自动被释放。如果你的网页要动态使用它们，你需要显式调用 {{ domxref("window.URL.revokeObjectURL()") }}来释放它们：

+ +
window.URL.revokeObjectURL(objectURL);
+
+ +

示例：使用对象URL来显示图片

+ +

这个例子使用对象URL来显示图片缩略图。另外，示例也会显示文件名和文件大小等其他文件信息。

+ +

显示接口的HTML类似于这样：

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Select some files</a>
+<div id="fileList">
+  <p>No files selected!</p>
+</div>
+
+ +

这确定我们的文件 {{ HTMLElement("input") }} 元素显示为一个可以调用文件选择器的链接（我们隐藏了文件输入元素来阻止显示用户不友好的界面）。这个在 {{ anch("Using hidden file input elements using the click() method") }}节已经说明了这种调用文件选择器的方法。

+ +

handleFiles() 方法如下：

+ +
window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+    if (fileElem) {
+        fileElem.click();
+    }
+    e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+function handleFiles(files) {
+    if (!files.length) {
+        fileList.innerHTML = "<p>No files selected!</p>";
+    } else {
+        fileList.innerHTML = "";
+        var list = document.createElement("ul");
+        fileList.appendChild(list);
+        for (var i = 0; i < files.length; i++) {
+            var li = document.createElement("li");
+            list.appendChild(li);
+            var img = document.createElement("img");
+            img.src = window.URL.createObjectURL(files[i]);
+            img.height = 60;
+            img.onload = function () {
+                window.URL.revokeObjectURL(this.src);
+            }
+            li.appendChild(img);
+            var info = document.createElement("span");
+            info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+            li.appendChild(info);
+        }
+    }
+}
+ +

首先，获取ID为 fileList 的 {{ HTMLElement("div") }} 。这个区块里我们会插入我们的文件列表，包括缩略图。

+ +

如果传入 handleFiles() 的 {{ domxref("FileList") }} 对象值为 null 时，我们只要简单将这块的内部HTML为显示“No files selected!”。否则，我们就需要像下面这样编写我们的文件列表：

+ +
    +
  1. 创建一个无序列表 ({{ HTMLElement("ul") }}) 元素。
    2. +
  2. 通过调用列表的{{ domxref("Node.appendChild()") }}方法来将新的列表元素插入到 {{ HTMLElement("div") }}块。
    3. +
  3. 遍历文件集合 {{ domxref("FileList") }}（即files）中的每个 {{ domxref("File") }}： +
      +
    1. 创建一个新的列表项（{{ HTMLElement("li") }}）元素并插入到列表中。
      2. +
    2. 创建一个新的图片（{{ HTMLElement("img") }}）元素。
      3. +
    3. 设置图片的源为一个新的指代文件的对象URL，使用{{ domxref("window.URL.createObjectURL()") }}来创建blob URL。
      4. +
    4. 设置图片的高度为60像素。
      5. +
    5. 设置图片的load事件处理器来释放对象URL，当图片加载完成之后对象URL就不再需要了。这个可以通过调用{{ domxref("window.URL.revokeObjectURL()") }}方法并且传递 img.src中的对象URL字符串来实现。
      6. +
    6. 将新的列表项添加到列表中。
      7. +
    +
    4. +
+ +

这是上面代码的一个在线示例：

+ +

{{EmbedLiveSample('示例：使用对象URL来显示图片', '100%', '300px')}}

+ +

例子：上传一个用户选择的文件

+ +

另一件您可能想要做的事是让用户将选定的一个或多个文件（例如前一个示例中选择的图像）上传到服务器。这用异步可以很容易地完成。

+ +

创建上传任务

+ +

继续前面示例中构建缩略图的代码，回想一下每个缩略图图像都在CSS类obj中，并且file属性中附加了相应的 {{ domxref("File") }} 。这允许我们使用 {{ domxref("Document.querySelectorAll()") }} 选择用户决定上传的所有图像，如下所示：

+ +
function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

第2行获取了文档中所有CSS类为obj的元素的 {{ domxref("NodeList") }}，命名为imgs。在我们的例子中，这些是包含所有图像缩略图的列表。有了这个列表，遍历并为每一项创建一个新的FileUpload实例就很简单了。每个实例都可以处理相应文件的上传。

+ +

Handling the upload process for a file处理文件的上传过程

+ +

FileUpload函数接受两个输入：一个image元素和一个包含图像数据的文件。

+ +
function FileUpload(img, file) {
+  var reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+
+ +

上面的FileUpload() 函数创建了一个“加载中”指示器，用于显示进度信息，然后创建了一个 {{ domxref("XMLHttpRequest") }} 来处理上传数据。

+ +

实际传输数据前，采取了几道准备步骤：

+ +
    +
  1. XMLHttpRequest的progress监听器被设为将加载指示器更新为新的百分比信息，这样随着上传进行，指示器会显示最新的信息。
    2. +
  2. XMLHttpRequest的load事件监听器被设为将加载指示器的进度信息更新为100%，以保证进度显示确实达到了100%（以防在上传过程中出现粒度误差）。然后它移除了已经不再需要的加载指示器。这样上传一完成指示器就会消失。
    3. +
  3. 上传图像文件的请求，是由调用XMLHttpRequest的open()函数发送POST请求完成的。
    4. +
  4. 上传的MIME类型是通过调用XMLHttpRequest的overrideMimeType()函数来设置的。这个例子中，我们使用通用MIME类型。是否需要设置MIME类型取决于你的具体使用情况。
    5. +
  5. FileReader对象用于将文件转换为二进制字符串。
    6. +
  6. 最后，当内容被加载时，会调用XMLHttpRequest的send()函数来上传文件内容。
    7. +
+ +
提示：上面例子中使用的非标准的sendAsBinary方法在Gecko 31 {{ geckoRelease(31) }} 中已废弃。请使用标准的send(Blob data)方法代替。
+ +

异步处理文件上传

+ +

这个例子演示了如何异步上传文件，在服务器端使用了php、在客户端使用了JavaScript。

+ +
<?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?><!DOCTYPE html>
+<html>
+<head>
+    <title>dnd binary upload</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="application/javascript">
+        function sendFile(file) {
+            const uri = "/index.php";
+            const xhr = new XMLHttpRequest();
+            const fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            const dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                const filesArray = event.dataTransfer.files;
+                for (let i=0; i<filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <div>
+        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
+    </div>
+</body>
+</html>
+
+ +

例子：用对象URL显示PDF

+ +

对象URL可以用于image之外的其它东西！它可以用于显示嵌入的PDF文件或任何其它浏览器能显示的资源。

+ +

在Firefox中，要让PDF嵌入式地显示在iframe中（而不是作为下载的文件弹出），必须将pdfjs.disabled设为false {{non-standard_inline()}}.

+ +
<iframe id="viewer">
+
+ +

这是src属性的改动：

+ +
const obj_url = window.URL.createObjectURL(blob);
+const iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+window.URL.revokeObjectURL(obj_url);
+
+ +

例子：将对象URL用于其它文件类型

+ +

你可以用同样方式操作其它格式的文件。这是预览上传的视频的方法：

+ +
const video = document.getElementById('video');
+const obj_url = window.URL.createObjectURL(blob);
+video.src = obj_url;
+video.play()
+window.URL.revokeObjectURL(obj_url);
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态注解
{{SpecName('HTML WHATWG', 'number-state.html#concept-input-type-file-selected', 'File upload state')}}{{Spec2('HTML WHATWG')}}
{{SpecName('File API')}}{{Spec2('File API')}}Initial definition
+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/file/webkitrelativepath/index.html b/files/zh-cn/web/api/file/webkitrelativepath/index.html new file mode 100644 index 0000000000..e8e86bc53c --- /dev/null +++ b/files/zh-cn/web/api/file/webkitrelativepath/index.html @@ -0,0 +1,126 @@ +--- +title: File.webkitRelativePath +slug: Web/API/File/webkitRelativePath +translation_of: Web/API/File/webkitRelativePath +--- +

{{APIRef("File API")}}{{non-standard_header}}

+ +

File.webkitRelativePath 是只读属性，包含 {{domxref("USVString")}}，它规定了文件的路径，相对于用户在 {{HTMLElement("input")}} 元素中选择的目录，这个元素设置了 {{htmlattrxref("webkitdirectory", "input")}} 属性。

+ +

语法

+ +
 relativePath = File.webkitRelativePath
+ +

值

+ +

{{domxref("USVString")}} 包含文件路径，相对于用户所选的祖先目录。

+ +

示例

+ +

这个示例展示了目录选择器，它让用户选择一个或多个目录。{{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') }}

+ +

特别提醒：假设文件路径是 C:\f1\f2\f3\file.txt, 用户选择的是f1 文件夹，则Chrome、Firefox、Edge 都能正确返回  f2/f3/file.txt值。而国产的QQ浏览器、360浏览器、UC浏览器、搜狗浏览器都只能返回 f3/file.txt。也就是国产浏览器调用webkitRelativePath返回的结果都不会是你希望得到的路径，请注意使用时的细微差距。

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('File System API', '#dom-file-webkitrelativepath', 'webkitRelativePath') }}{{ Spec2('File System API') }}Initial specification.
+ +

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

+ +

浏览器兼容性

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13 {{ property_prefix("webkit") }}{{ CompatGeckoDesktop(49) }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo }}0.16 {{ property_prefix("webkit") }}{{ CompatGeckoMobile(49) }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

另见

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