HTML5 拖放 - 在 Safari 中检测文件夹(FileList、File)

标签 html safari drag-and-drop filter directory

我已经在 J​​S (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);

最佳答案

我们可以使用 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、File),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4857846/

相关文章:

php - html dom 解析 - 我可以只找到文件类型吗?

jquery - 如何为 Safari 5.x Windows 删除特定的 CSS 样式?

delphi - 在 Delphi 中使自定义拖动图像不透明

c# - Winforms 设计器 : How to disable my usercontrol from being a container?

d3.js - d3 v4 使用 TypeScript 进行拖放

html - 具有底部对齐页脚的相同高度柔性盒中的垂直对齐

html - 打开后我的 bootstrap Toggle 消失了

html - 如何自定义 zurb foundation 顶部菜单

java - Mac Safari 不会运行大小为零的小程序

JavaScript 错误行 1 <ANYJAVASCRIPFILE.JS> SyntaxError : Parse error IN Iphone mobile safari