Window:showOpenFilePicker() 方法

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

安全上下文: 此项功能仅在一些支持的浏览器安全上下文(HTTPS)中可用。

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

Window 接口的 showOpenFilePicker() 方法用于显示一个文件选择器,以允许用户选择一个或多个文件并返回这些文件的句柄。

语法

js
showOpenFilePicker()

参数

options 可选

选项对象,包含以下属性:

excludeAcceptAllOption 可选

布尔值,默认为 false。默认情况下,选择器应包含一个不应用任何文件类型过滤器的选项(通过下面的类型选项启动)。将此选项设置为 true 意味着该选项可用。

id 可选

通过指定 ID,浏览器可以为不同的 ID 记住不同的目录。如果相同的 ID 用于另一个选择器,则该选择器将在同一目录中打开。

multiple 可选

布尔值,默认为 false。当设置为 true 时,可以选择多个文件。

startIn 可选

一个 FileSystemHandle 对象或一个众所周知的目录("desktop""documents""downloads""music""pictures""videos")以指定打开选择器的起始目录。

types 可选

允许选择的文件类型的数组。每个项目都是一个具有以下选项的对象:

description 可选

允许的文件类型类别的可选描述。默认为空字符串。

accept

一个 Object,其键设置为 MIME 类型,值设置为文件扩展名的数组(参见下面的示例)。

返回值

一个 Promise 对象,会兑现一个包含 FileSystemFileHandle 对象的数组

异常

AbortError DOMException

如果用户在没有做出选择的情况下关闭提示,或者如果用户代理认为任何选定的文件过于敏感或危险,则抛出此异常。

SecurityError DOMException

如果调用被同源策略阻止,或者不是通过用户交互(例如按下按钮)调用,则抛出该异常。

TypeError

如果无法处理接受类型,则抛出该异常,如果出现以下情况,则可能会发生这种情况:

  • types 选项中任何项目的 accept 选项的任何键字符串都无法解析为有效的 MIME 类型。
  • types 选项中任何项目的 accept 选项的任何值字符串都是无效的,例如,如果它不以 . 开头,或者它以 . 结尾,或者它包含任何无效的值码点且长度大于 16。
  • types 选项为空,excludeAcceptAllOption 选项为 true

安全性

瞬态用户激活是必需的。用户必须与页面或 UI 元素进行交互才能使该特性正常运行。

示例

在此处我们设置一个用于传递给方法的选项对象。我们将允许选择图片类型、不允许使用所有类型,也不能选择多个文件。

js
const pickerOpts = {
  types: [
    {
      description: "Images",
      accept: {
        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
      },
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false,
};

接下来我们创建一个异步函数来显示文件选择器并返回选择的文件。

js
// 创建用于存放文件句柄的引用。
let fileHandle;

async function getFile() {
  // 打开文件选择器,解构返回的数组中的第一个元素
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // 操作 fileHandle 的后续代码
}

规范

Specification
File System Access
# api-showopenfilepicker

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
showOpenFilePicker
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

参见