JS文件上传器如何检测文件是否被其他进程占用？

由于浏览器沙箱安全限制，JavaScript无法直接获取文件的系统锁定状态，只能通过尝试读取文件内容的方式间接判断文件是否被其他进程占用。以下是针对拖拽上传和文件选择器两种场景的具体实现：

通用检测函数 #

先封装一个异步函数，通过读取文件片段来判断文件是否可访问：

async function isFileLocked(file) {
  try {
    // 仅读取文件开头1字节，避免大文件读取耗时
    const reader = new FileReader();
    await new Promise((resolve, reject) => {
      reader.onload = resolve;
      reader.onerror = reject;
      reader.readAsArrayBuffer(file.slice(0, 1));
    });
    return false; // 文件可读取，未被占用
  } catch (err) {
    // 匹配常见的文件占用/权限错误类型
    const lockedErrorTypes = ['NotFoundError', 'NotReadableError', 'SecurityError'];
    return lockedErrorTypes.includes(err.name) || 
           err.message.includes('permission') || 
           err.message.includes('locked');
  }
}

1. 拖拽上传场景处理 #

针对拖拽时被占用文件无法被选中的情况，除了检测选中的文件，还可以在拖拽结束后判断是否有有效文件传入，给出对应提示：

const dropArea = document.getElementById('drop-area');

// 拖拽状态样式控制
dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropArea.classList.add('drag-over');
});

dropArea.addEventListener('dragleave', () => {
  dropArea.classList.remove('drag-over');
});

// 处理拖拽上传
dropArea.addEventListener('drop', async (e) => {
  e.preventDefault();
  dropArea.classList.remove('drag-over');
  
  const files = Array.from(e.dataTransfer.files);
  if (files.length === 0) {
    // 未检测到可上传文件，提示可能存在被占用的情况
    alert('未检测到可上传的文件，若您拖拽的文件正在被其他程序打开，请关闭后重试。');
    return;
  }

  for (const file of files) {
    const isLocked = await isFileLocked(file);
    if (isLocked) {
      alert(`文件 "${file.name}" 无法上传，可能正在被其他程序占用，请关闭后重试。`);
      continue;
    }
    // 执行正常上传逻辑
    // uploadFile(file);
  }
});

2. 文件选择器场景处理 #

监听文件选择器的change事件，对选中的文件逐个检测：

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', async (e) => {
  const files = Array.from(e.target.files);
  for (const file of files) {
    const isLocked = await isFileLocked(file);
    if (isLocked) {
      alert(`文件 "${file.name}" 无法上传，可能正在被其他程序占用，请关闭后重试。`);
      // 清空输入框，避免用户重复选择同一被占用文件
      fileInput.value = '';
      continue;
    }
    // 执行正常上传逻辑
    // uploadFile(file);
  }
});

注意事项 #

• 这种检测方式是间接判断，可能存在误判（比如文件本身无读取权限），所以提示文案建议保留“可能”的表述，避免绝对化。
• 部分浏览器会直接拦截被占用文件的拖拽/选择操作，此时只能通过“未检测到文件”的兜底提示引导用户排查。

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