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

Posted 2023-02-23

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

【英文标题】：HTML5 Drag and Drop - detect folders in Safari (FileList, File)

【发布时间】：2011-06-18 23:23:42

【问题描述】：

我在 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);

【问题讨论】：

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

最新版本的 Chrome 似乎与 Safari 存在相同的问题。你有没有找到过滤掉这些的标准方法？

看起来有一个基于此文档 developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry/… 的 isDirectory 属性，但 Safari 可能不支持该属性。

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

【参考方案2】：

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

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

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

【参考方案3】：

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

【讨论】：

不太成功（有些文件没有扩展名）但缺乏更好的响应，我将这个标记为正确。

看起来有更好的方法。 Google docs 能够在 Ajax 删除期间区分文件和文件夹。它将没有扩展名的文件作为文件正确处理。真的很感兴趣这些是如何实现的。