Firefox v73（Win7）多文件选择器占用文件预检测问题咨询

这确实是Firefox 73这类旧版本和Chrome之间的行为差异——Chrome会在文件选择阶段就主动检查文件的可访问性，而Firefox则允许用户选择这类被占用的文件，直到实际尝试读取或上传时才会暴露问题，导致上传停滞超时。

要在上传前提前检测出被占用的文件，你可以利用File API尝试读取每个文件的极小片段，通过捕获读取错误来判断文件是否可访问。具体实现思路如下：

• 监听文件选择器的change事件，获取所有选中的文件
• 遍历每个文件，尝试读取其前1个字节（足够触发文件访问检查，又不会占用太多资源）
• 收集所有读取失败的文件，提示用户移除后再继续上传

下面是具体的代码示例：

document.getElementById('files').addEventListener('change', async function(e) {
  const selectedFiles = Array.from(e.target.files);
  const inaccessibleFiles = [];

  for (const file of selectedFiles) {
    try {
      // 尝试读取文件的前1字节，检测是否可访问
      await new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve();
        reader.onerror = () => reject(new Error(`无法访问文件: ${file.name}`));
        reader.readAsArrayBuffer(file.slice(0, 1));
      });
    } catch (err) {
      inaccessibleFiles.push(file.name);
    }
  }

  if (inaccessibleFiles.length > 0) {
    alert(`以下文件无法访问（可能被其他程序占用），请移除后再上传：\n${inaccessibleFiles.join('\n')}`);
    // 清空文件选择器，让用户重新选择
    e.target.value = '';
  } else {
    // 所有文件可正常读取，执行上传逻辑
    console.log('所有文件状态正常，开始上传');
    // 调用你的上传函数，比如：
    // uploadToAPI(selectedFiles);
  }
});

补充说明 #

这种方法的核心是利用Windows的文件锁定机制：当文件被其他进程独占打开时，尝试读取文件的操作会直接失败，从而触发FileReader的error事件。通过捕获这个错误，我们就能在上传前筛选出所有无法访问的文件。

需要注意的是，这种检测方式不会修改文件内容，只是做一个极小范围的读取尝试，对性能几乎没有影响。另外，如果你需要更精确的错误判断，可以在reader.onerror中查看reader.error.code，不过对于文件被占用的场景，一般只要捕获到读取失败即可判定。

内容的提问来源于stack exchange，提问作者Kevin H.