diff --git a/files/zh-cn/web/api/file_api/index.md b/files/zh-cn/web/api/file_api/index.md index 0c380fb331755b..e0c90ace5fc95a 100644 --- a/files/zh-cn/web/api/file_api/index.md +++ b/files/zh-cn/web/api/file_api/index.md @@ -1,11 +1,13 @@ --- title: 文件 API slug: Web/API/File_API +l10n: + sourceCommit: 497d322c61511b11e4877a77660f8d7b394a8277 --- -{{DefaultAPISidebar("File API")}} +{{DefaultAPISidebar("File API")}}{{AvailableInWorkers}} -## 概念和基本使用 +## 概念和用法 文件 API 使得 web 应用可以访问文件和其中的内容。 @@ -30,10 +32,10 @@ slug: Web/API/File_API ### 对其他接口的扩展 -- {{domxref("URL.createObjectURL()")}} +- {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} - : 创建一个可用于获取 {{domxref("File")}} 或 {{domxref("Blob")}} 对象的 URL。 -- {{domxref("URL.revokeObjectURL()")}} - - : 释放先前通过调用 {{domxref("URL.createObjectURL()")}} 创建的现有对象 URL。 +- {{domxref("URL.revokeObjectURL_static", "URL.revokeObjectURL()")}} + - : 释放先前通过调用 {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} 创建的现有对象 URL。 ## 示例 diff --git a/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md b/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md index 38ec677c1edc66..4100cd7ea48b35 100644 --- a/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md +++ b/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md @@ -1,9 +1,11 @@ --- title: 在 web 应用程序中使用文件 slug: Web/API/File_API/Using_files_from_web_applications +l10n: + sourceCommit: 94ef07a7b073c2663cbace0667bdb717a40bfa28 --- -{{APIRef("File API")}} +{{DefaultAPISidebar("File API")}}{{AvailableInWorkers}} 通过使用文件 API，web 内容可以要求用户选择本地文件，然后读取这些文件的内容。这种选择可以通过使用 HTML `{{HTMLElement("input/file", '<input type="file">')}}` 元素或通过拖放来完成。 @@ -85,12 +87,13 @@ const numFiles = files.length; uploadInput.addEventListener( "change", () => { - // Calculate total size + // 计算总大小 let numberOfBytes = 0; for (const file of uploadInput.files) { numberOfBytes += file.size; } - // Approximate to the closest prefixed unit + + // 近似到最接近的前缀单位 const units = [ "B", "KiB", @@ -109,10 +112,11 @@ const numFiles = files.length; const approx = numberOfBytes / 1024 ** exponent; const output = exponent === 0 - ? `${numberOfBytes} bytes` + ? `${numberOfBytes} 字节` : `${approx.toFixed(3)} ${ units[exponent] - } (${numberOfBytes} bytes)`; + }（${numberOfBytes} 字节）`; + document.getElementById("fileNum").textContent = uploadInput.files.length; document.getElementById("fileSize").textContent = output; @@ -242,7 +246,7 @@ function drop(e) { ## 示例：显示用户选择的图片的缩略图 -比方说，你正在开发一个炫酷的下一代图片分享网站，并且想使用 HTML 来展示用户在实际上传之前的图片的缩略图。你可以像我们之前讨论的那样创建自己的 input 元素或者 drop 区域，然后对它们使用一个回调函数，比如下面的 `handleFiles()`。 +比方说，你正在开发一个炫酷的下一代图片分享网站，并且想使用 HTML 来展示用户在实际上传之前的图片的缩略图。你可以像我们之前讨论的那样创建自己的 input 元素或者 drop 区域，然后对它们使用一个回调函数，比如下面的 `handleFiles()` 函数。 ```js function handleFiles(files) { @@ -275,7 +279,7 @@ function handleFiles(files) { ## 使用对象 URL -DOM 的 {{DOMxRef("URL.createObjectURL()")}} 和 {{DOMxRef("URL.revokeObjectURL()")}} 方法让你创建简单的 URL 字符串，可以用来引用任何可以用 DOM {{DOMxRef("File")}} 对象引用的数据，包括用户电脑中的本地文件。 +DOM 的 {{DOMxref("URL.createObjectURL_static", "URL.createObjectURL()")}} 和 {{DOMxref("URL.revokeObjectURL_static", "URL.revokeObjectURL()")}} 方法让你创建简单的 URL 字符串，可以用来引用任何可以用 DOM {{DOMxRef("File")}} 对象引用的数据，包括用户电脑中的本地文件。 当你需要在 HTML 中通过 URL 来引用一个 {{DOMxRef("File")}} 对象时，你可以创建一个对象 URL，就像这样： @@ -283,7 +287,7 @@ DOM 的 {{DOMxRef("URL.createObjectURL()")}} 和 {{DOMxRef("URL.revokeObjectURL( const objectURL = window.URL.createObjectURL(fileObj); ``` -这个对象 URL 是一个标识 {{DOMxRef("File")}} 对象的字符串。每次你调用 {{DOMxRef("URL.createObjectURL()")}} ，都会创建一个唯一的对象 URL，即使你已经为该文件创建了一个对象 URL。每一个 URL 都必须被释放。虽然它们会在文档卸载时自动释放，但如果你的页面动态地使用它们，你应该通过调用 {{DOMxRef("URL.revokeObjectURL()")}} 明确地释放它们： +这个对象 URL 是一个标识 {{DOMxRef("File")}} 对象的字符串。每次你调用 {{DOMxref("URL.createObjectURL_static", "URL.createObjectURL()")}}，都会创建一个唯一的对象 URL，即使你已经为该文件创建了一个对象 URL。每一个 URL 都必须被释放。虽然它们会在文档卸载时自动释放，但如果你的页面动态地使用它们，你应该通过调用 {{DOMxref("URL.revokeObjectURL_static", "URL.revokeObjectURL()")}} 明确地释放它们： ```js URL.revokeObjectURL(objectURL); @@ -308,7 +312,7 @@ URL.revokeObjectURL(objectURL); ``` -这就建立了我们的文件 {{HTMLElement("input")}} 元素，以及调用文件选取器的链接（因为我们把文件 input 隐藏起来，以防止显示那个不那么吸引人的用户界面）。这在[使用 click() 方法隐藏文件 input 元素](<#通过_click()_方法使用隐藏的_file_input_元素>)一节中有所说明，调用文件选取器的方法也是如此。 +这就建立了我们的文件 {{HTMLElement("input")}} 元素，以及调用文件选取器的链接（因为我们把文件 input 隐藏起来，以防止显示那个不那么吸引人的用户界面）。这在[使用 click() 方法使用隐藏的文件 input 元素](#通过_click_方法使用隐藏的文件_input_元素)一节中有所说明，调用文件选取器的方法也是如此。 `handleFiles()` 方法如下： @@ -366,9 +370,9 @@ function handleFiles() { 1. 创建一个新的列表项（{{HTMLElement("li")}}）元素并插入到列表中。 2. 创建一个新的图片（{{HTMLElement("img")}}）元素。 - 3. 设置图片的源为一个新的指代文件的对象 URL，使用 {{DOMxRef("URL.createObjectURL()")}} 来创建 blob URL。 + 3. 设置图片的源为一个新的指代文件的对象 URL，使用 {{DOMxref("URL.createObjectURL_static", "URL.createObjectURL()")}} 来创建 blob URL。 4. 设置图片的高度为 60 像素。 - 5. 设置图片的 load 事件处理器来释放对象 URL，当图片加载完成之后对象 URL 就不再需要了。这个可以通过调用 {{DOMxRef("URL.revokeObjectURL()")}} 方法并且传递 `img.src`中的对象 URL 字符串来实现。 + 5. 设置图片的 load 事件处理器来释放对象 URL，当图片加载完成之后对象 URL 就不再需要了。这个可以通过调用 {{DOMxref("URL.revokeObjectURL_static", "URL.revokeObjectURL()")}} 方法并且传递 `img.src` 中的对象 URL 字符串来实现。 6. 将新的列表项添加到列表中。 这是上面代码的一个在线示例： @@ -377,7 +381,9 @@ function handleFiles() { ## 示例：上传一个用户选择的文件 -另一件你可能想要做的事是让用户将选定的一个或多个文件（例如前一个示例中选择的图像）上传到服务器。这用异步可以很容易地完成。 +此示例展示了如何让用户将文件（例如使用上一个示例选择的图像）上传到服务器。 + +> **备注：** 通常最好使用 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 而不是 {{domxref("XMLHttpRequest")}} 发起 HTTP 请求。但是，在这种情况下，我们想向用户显示上传进度，而 Fetch API 仍然不支持此特性，因此示例使用 `XMLHttpRequest`。使用 Fetch API 跟踪进度通知标准化的工作位于 。 ### 创建上传任务