HTML5拖放 - 在Safari中检测文件夹（FileList，File）

Question

我在JS中设置了一段拖放文件上传脚本（AJAX POST），但在 Safari - Version 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);

- biasedbit

---

我为此发布了一个错误报告：https://bugs.webkit.org/show_bug.cgi?id=63898 - meleyal

最新版本的Chrome似乎出现了与Safari相同的问题。你有没有找到过滤这些问题的标准方法的运气？ - Chris Hynes

根据这份文档 https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry/isDirectory，似乎有一个 isDirectory 属性，但 Safari 可能不支持。 - 1.21 gigawatts

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.)

- Pavel Evstigneev

Answer 2

您可以使用原始POST数据来检测服务器上的文件或文件夹： 获取原始POST数据

我注意到文件夹只在开头有表单边界，而结尾没有。所以基本上看起来像是浏览器开始执行POST请求，然后在完成请求之前就停止了。（我只在Safari中测试过，但我想其他浏览器也是一样的。）

您可以将上传失败的文件保存在会话中，然后使用AJAX来测试是否生成了这样的请求。虽然需要额外的AJAX请求，但至少您可以检测到它。这是我目前找到的最佳选项。

- B. Martin

Answer 3

为什么不直接检查老式文件后缀呢？这应该适用于大多数情况，其中“file.suf”是一个文件，“file”是一个文件夹...

- zoku

---

并不完全解决问题（有些文件没有扩展名），但是由于没有更好的答案，我将这个标记为正确的。 - biasedbit

看起来有更好的方法。Google Docs 能够在 Ajax 拖放期间区分文件和文件夹。它能正确地处理没有扩展名的文件，将其视为文件。我真的很想知道这是如何实现的。 - IT Hit WebDAV