Window: showOpenFilePicker() 方法

语法

showOpenFilePicker()
showOpenFilePicker(options)

参数

options 可选

包含选项的对象，选项如下：

excludeAcceptAllOption 可选

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

id 可选

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

multiple 可选

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

startIn 可选

一个 FileSystemHandle 或一个众所周知的目录（"desktop"、"documents"、"downloads"、"music"、"pictures" 或 "videos"），用于打开对话框。

types 可选

一个 Array，包含允许选择的文件类型。每个项目都是一个包含以下选项的对象：

description 可选

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

accept

一个 Object，其键设置为 MIME 类型，值设置为文件扩展名的 Array（参见下面的示例）。

返回值

一个 Promise，其 fulfillment 处理程序接收一个 FileSystemFileHandle 对象数组。

异常

AbortError DOMException

如果用户在未进行选择的情况下取消提示，或者用户代理认为任何选定的文件过于敏感或危险，则抛出此错误。

SecurityError DOMException

如果调用被 同源策略 阻止，或者不是通过用户交互（例如按钮按下）调用，则抛出此错误。

TypeError

如果接受类型无法处理，则抛出此错误，这可能发生在以下情况：

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

安全

需要瞬时用户激活。用户必须与页面或 UI 元素进行交互才能使此功能正常工作。

示例

在这里，我们设置了要传递给方法的选项对象。我们将允许选择图像文件类型，没有允许所有文件类型的选项，也没有多文件选择。

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

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

// create a reference for our file handle
let fileHandle;

async function getFile() {
  // open file picker, destructure the one element returned array
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // run code with our fileHandle
}

规范

浏览器兼容性

另见

• File System API
• 文件系统访问 API：简化对本地文件的访问