HTML中如何使用showOpenFilePicker打开文件选择器-html教程-PHP中文网

showopenfilepicker 目前仅 chromium 系统（chrome 91+、edge 91+、opera 85+）稳定支持，firefox 和 safari 完全不支持；必须在用户手势中调用，需检测存在性并降级到 input[type="file"]，支持类型过滤与多选，返回 filehandle 需调用 getfile() 获取 file 实例。

html中如何使用showopenfilepicker打开文件选择器

showOpenFilePicker 在哪些浏览器能用

这个 API 目前只在 Chromium 系统（Chrome 91+、Edge 91+、Opera 85+）中稳定支持，Firefox 和 Safari 完全不支持，调用会直接抛出 TypeError: showOpenFilePicker is not a function。别在生产环境默认启用，必须先检测：

if ('showOpenFilePicker' in window) {
  const [fileHandle] = await window.showOpenFilePicker();
} else {
  // 降级到 <input type="file">
}

调用 showOpenFilePicker 必须在用户手势中

它被设计为“需要显式用户交互触发”，否则会拒绝执行并抛出 DOMException: Permission denied。常见失效场景包括：

放在 setTimeout 或 Promise.resolve().then() 中异步触发
在页面加载完成（DOMContentLoaded）时自动弹出
绑定在非点击类事件上（如 mouseenter、focus）

正确做法是只响应 click、keydown（且 key === 'Enter' 或 ' '）等明确用户意图的事件。

如何限制文件类型和多选行为

showOpenFilePicker 接收一个 options 对象，关键参数有：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

types：数组，每个元素是 { description, accept: { 'text/plain': ['.txt'] } } 形式；注意 accept 的键是 MIME 类型，值是扩展名数组，不能写成 accept: '.txt'
multiple：布尔值，默认 false；设为 true 后返回的是 FileHandle[] 数组，不是单个
excludeAcceptAllOption：设为 true 可隐藏“所有文件”选项（部分系统有效）

示例：只允许选择 PNG/JPEG 图片，且允许多选

const handles = await window.showOpenFilePicker({
  types: [{
    description: 'Images',
    accept: {
      'image/png': ['.png'],
      'image/jpeg': ['.jpg', '.jpeg']
    }
  }],
  multiple: true
});

拿到 FileHandle 后怎么读取内容

它不是 File 对象，不能直接用 FileReader 或 URL.createObjectURL。必须先调用 getFile() 方法获取真实 File 实例：

const [handle] = await window.showOpenFilePicker();
const file = await handle.getFile(); // ← 这一步不可省略
const text = await file.text(); // 或 file.arrayBuffer()、file.stream()
console.log(file.name, file.size);

容易忽略的点：如果用户修改了文件内容（比如用编辑器保存），getFile() 返回的 File 是调用时刻的快照，不会自动更新。需要重新调用 handle.getFile() 获取最新版本。