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

Posted 2023-02-15

【中文标题】HTML filepicker multi - 获取正在使用的文件

【英文标题】：HTML filepicker multi - get files in use

【发布时间】：2020-06-03 11:20:34

【问题描述】：

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

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

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

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

在尝试上传文件之前，是否有任何选项可以发现问题（正在使用的文件）？

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

【问题讨论】：

你能显示你的ajax调用吗？

【参考方案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>

【讨论】：

感谢 Kaiido 的解决方案。你的声望+50。救命稻草！

【参考方案2】：

选择多个文件为什么你不使用 https://github.com/blueimp/jQuery-File-Upload

【讨论】：

由于客户方面的技术限制，目前我无法选择使用 jQuery。