HTML5 拖放 - 检测 Safari 中的文件夹（文件列表、文件）

Question

我在 JS (AJAX POST) 中设置了拖放文件上传脚本，但在 Safari 中过滤文件夹时遇到了困难 - 版本 5.0.3 (6533.19.4)。

每当我将多个文件/文件夹放入浏览器时，Chrome 都会过滤掉这些文件夹，而 Firefox 会为 .size 返回 0，因此防止这些情况是微不足道的。 然而，Safari 会返回一个 68 字节的文件（文件夹的大小）。

有什么方法可以测试这个File（FileList 中的项目）是否是一个文件夹？ 在File/Blob API 中似乎找不到任何测试这种情况的东西（尝试.type 没有意义，因为它不会返回任何未知文件和文件夹...）

更多信息：

基本上发生的情况是 AJAX 请求的正文为空。我正在使用FormData 上传：

var file = ...; // the dropped file
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
...
xhr.send(formData);

Answer 1

我们可以使用FileReader 读取文件。代码可以是这样的：

Array.prototype.forEach.call(e.dataTransfer.files, function (file) {
  var reader = new FileReader();
  reader.onload = function (event) {
    // it's a file
    addFile(file);
  };
  reader.onerror = function (event) {
    alert("Uploading folders not supported in Safari");
  }
  reader.readAsDataURL(file);
});

对于文件夹会报错：

Failed to load resource: The operation couldn’t be completed. (WebKitBlobResource error 4.)

Answer 2

您可以使用原始发布数据检测它是服务器上的文件还是文件夹： Get raw post data

我注意到文件夹的开头只有表格边界，结尾没有。所以基本上看起来浏览器开始发布，然后在完成请求之前停止。 （我只用 safari 测试过，但我猜其他浏览器也一样。）

您可以将失败的上传保存在会话中，然后使用 AJAX 测试失败的上传是否产生了这样的请求。您确实有一个额外的 AJAX 请求，但至少您可以检测到它。这是迄今为止我找到的最佳选择。

Answer 3

为什么不只检查 oldschool 文件后缀？应该适用于“file.suf”是文件而“file”是文件夹的大多数情况...