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

问题描述：

我已经在JS（AJAX POST）中设置了拖放文件上传脚本，并且在Safari浏览器中筛选文件夹有困难 - 版本5.0.3 （6533.19.4）。HTML5拖放 - 在Safari浏览器中检测文件夹（FileList，文件）

每当我将多个文件/文件夹拖放到浏览器中时，Chrome浏览器会过滤掉这些文件夹，并且Firefox将返回0代表.size，因此防止出现这些情况很简单。然而，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);

我张贴这种错误报告：https://bugs.webkit.org/show_bug.cgi?id= 63898 – meleyal 2011-07-04 12:05:52

最新版本的Chrome似乎与Safari一样呈现相同的问题。你有没有什么运气能够追踪这些过滤的标准方法？ – 2011-08-29 17:06:02

答

为什么不检查旧校园的文件后缀？应该在大多数情况下，“file.suf”是一个文件，“文件”是一个文件夹工作...

答

你可以检测它是否是使用原始数据后在服务器上的文件或文件夹： Get raw post data

我注意到，文件夹只有在开始处形成边界而在结尾处没有。所以基本上它看起来像浏览器开始做这个帖子，然后在完成请求之前停下来。（我只用safari测试过，但我猜这跟其他浏览器一样。）

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

答

我们可以通过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.)

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

相关推荐