如何使用JavaScript读取从访达/资源管理器复制到浏览器剪贴板的媒体文件

跨浏览器兼容实现方案 #

你可以基于paste事件做全场景适配，补全系统文件复制场景的FileSystemEntry处理逻辑，目前这套方案可以覆盖Chrome、Firefox、Safari的主流版本：

1. 完善paste事件处理逻辑

你之前测试的paste事件方案没有处理系统资源管理器复制文件的特殊场景，从访达/文件资源管理器复制的文件，在浏览器的paste事件回调中需要先解析DataTransferItem对应的文件系统条目，才能拿到真实的媒体文件对象：

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const items = e.clipboardData.items;
  const mediaFiles = [];

  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    if (item.kind === 'file') {
      // 优先处理普通文件对象
      const file = item.getAsFile();
      if (file) {
        mediaFiles.push(file);
        continue;
      }
      // 兼容系统文件复制场景的FileSystemEntry处理
      if (item.webkitGetAsEntry) {
        const entry = item.webkitGetAsEntry();
        if (entry && entry.isFile) {
          const realFile = await new Promise((resolve) => {
            entry.file(resolve);
          });
          mediaFiles.push(realFile);
        }
      }
    }
  }

  // 处理拿到的媒体文件
  mediaFiles.forEach(file => {
    const mediaUrl = URL.createObjectURL(file);
    console.log('获取到剪贴板媒体文件：', file.type, mediaUrl);
  });
});

2. Clipboard API兼容适配

如果你需要主动读取剪贴板内容（不是用户触发粘贴操作时读取），需要满足两个前提条件规避浏览器权限拦截：

• 读取操作必须在用户交互事件（点击、键盘按键等）的同步回调中触发，不能在异步逻辑中调用navigator.clipboard.read()
• 站点必须运行在HTTPS环境下，本地开发可使用localhost做测试
  Safari额外要求主动读取剪贴板前需要先申请权限，你可以补充权限判断逻辑：

async function readClipboardFiles() {
  if (!navigator.clipboard) return [];
  try {
    // Safari需要先调用Permissions API查询权限
    if (navigator.permissions) {
      const perm = await navigator.permissions.query({ name: 'clipboard-read' });
      if (perm.state !== 'granted' && perm.state !== 'prompt') return [];
    }
    const items = await navigator.clipboard.read();
    const mediaFiles = [];
    for (const item of items) {
      for (const type of item.types) {
        if (type.startsWith('image/') || type.startsWith('audio/') || type.startsWith('video/')) {
          const blob = await item.getType(type);
          mediaFiles.push(new File([blob], `clipboard-media.${type.split('/')[1]}`, { type }));
        }
      }
    }
    return mediaFiles;
  } catch (e) {
    console.error('读取剪贴板失败：', e);
    return [];
  }
}

3. 低版本浏览器兜底方案

对于不支持上述API的旧版浏览器，可以使用隐藏的input[type="file"]做兜底，引导用户通过文件选择器选择对应媒体文件，该方案兼容性最好，支持所有现代浏览器。

注意事项 #

• Firefox对主动调用navigator.clipboard.read()读取音视频文件的支持有限，优先使用paste事件方案
• 不要在异步逻辑（如setTimeout、接口请求回调）中调用剪贴板读取API，会被浏览器安全策略拦截
• 读取到的Blob URL使用完后要调用URL.revokeObjectURL()释放内存，避免内存泄漏

内容的提问来源于stack exchange，提问作者Chandra Prakaash