HTML filepicker multi - 获取正在使用的文件

Question

在 Window 7 上使用 Firefox v73 出现以下问题:

在我的代码中，我在 html 中使用了一个多文件选择器来并行上传多达 100 个文件:

<input type="file" id="files" name="files" multiple>

这些文件将被发送到 REST-API，然后由其处理。
当我选择当前正在使用的单个文件(在文件资源管理器中)时，我收到一条错误消息(可能通过窗口)，告诉我该文件无法被选中，因为它正在使用中。
如果我尝试选择包含一个或多个正在使用的文件的多个文件，我不会发生错误，但是当到达正在使用的文件并等待文件被释放时，上传似乎停止。
这导致请求等待超时(在我的情况下为 1 分钟)。

在尝试上传文件之前，是否有任何选项可以解决问题(正在使用的文件)？

PS:我在 Chrome 中尝试过相同的方法，它在将请求发送到 REST-API 之前返回一个错误。

Answer 1

这听起来像是操作系统问题。
有些东西正在锁定您的文件无法访问，这需要您进行修复。

我怀疑这将是一个常见问题，并且很难在无法遇到相同问题的情况下构建解决方案，但您可以尝试的一件事是在发送文件之前阅读文件。这可以通过 Blob.prototype.arrayBuffer 非常方便地完成。方法，可以是polyfill。

为了避免大量 I/O，您甚至可以尝试只读取其中的一小部分，感谢 Blob.prototype.slice() 方法。

const input = document.getElementById('inp');
const btn = document.getElementById('btn');

btn.onclick = async(evt) => {
  testAllFilesAvailability(input.files)
    .then(() => console.log('all good'))
    .catch(() => console.log('some are unavailable'));
}

function testAllFilesAvailability(files) {
  return Promise.all(
    [...files].map(file =>
      file.slice(0, Math.min(file.size, 4)) // don't load the whole file
      .arrayBuffer() // Blob.prototype.arrayBuffer may require a polyfill
    )
  );
}

<pre>
1. Select some files from the input
2. Change one of this files name on your hard-drive or even delete it
3. Press the button
</pre>

<input type="file" multiple id="inp">
<button id="btn">Test Availability</button>