浏览包含许多文件的文件夹时，带有接受属性的 HTML 输入文件挂起

Question

我正在为 MMS 消息开发一个文件选择器，它接受有限数量的 MIME 类型或扩展名。

当我点击浏览（Mac、Chrome 60 和 Chrome Canary 61、Firefox、Safari）时，我的最后一个文件夹是使用系统文件选择器打开的，其中未接受的文件应显示为灰色。

碰巧我的测试文件夹是下载，现在有大约 600 个文件或不同类型的文件。重要的是文件夹包含不同的文件类型，因为在不同的文件夹中，只有 .png 没关系。

乍一看，文件选择器（和浏览器）“挂起”。实际上，它会在一两分钟后（原文如此！），并带有如上所述的文件列表。

有人遇到过吗？有什么办法解决吗？

仅限 Mac 问题。 在 Windows 10 上没有看到同样的问题，一切正常。

var accept = ['image/jpeg',
  'image/png',
  'image/bmp',
  'image/gif',
  'image/tiff',
  'image/svg',
  'video/3gpp',
  'video/mp4',
  'video/mpeg',
  'video/msvideo',
  'audio/mpeg',
  'text/vcard',
  'application/zip',
  'application/rtf',
  'application/gzip'
];

var accepted_extensions = ['.jpg'].concat(accept
  .map(function(item) {
    return '.' + item.split('\/')[1];
  }));

document.querySelector('input.mime')
  .accept = accept.join(',');

document.querySelector('input.ext')
  .accept = accepted_extensions.join(',');

label {
  display: block;
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 20px;
}

<div>
  <label>Accept for MIME types</label>
  <input type="file" class="mime" multiple />
</div>
<div>
  <label>Accept for extensions</label>
  <input type="file" class="ext" multiple />
</div>
<div>
  <label>Without Accept property</label>
  <input type="file" multiple />
</div>

（演示：http://jsbin.com/zowixof/edit?js,output）

Answer 1

对我的测试文件夹执行二等分搜索，似乎所有的缓慢都是由一个 Djvu 文件引起的。

相关的门票讨论是：

• https://sourceforge.net/p/djvu/bugs/278/
• https://discussions.apple.com/thread/7789107?start=0&tstart=0（可能包含解决方案，但对我没有帮助）