您如何检测到用户将文件夹（而不是文件）拖到浏览器中？答案

【问题标题】：How can you detect that a user dragged a folder (not a file) into their browser?您如何检测到用户将文件夹（而不是文件）拖到浏览器中？
【发布时间】：2012-09-18 16:46:57
【问题描述】：

我很清楚您不能通过拖放上传整个文件夹。问题是，我如何判断是否有人尝试这样做？如果你将一个文件夹拖到浏览器中，它的行为就像你拖一个带有 webkit 不知道的扩展名的文件一样，比如“.sh”。怎么区分？

我已经在 Mac OS X 和 Windows 上的 Chrome、Safari 和 Firefox 中对此进行了测试。根据浏览器和操作系统，我得到的结果略有不同。有时它会成功上传零字节文件。有时它会上传文件夹的图片。有时它无法上传任何内容。

event.dataTransfer.types 和 event.dataTransfer.items 都撒谎并说类型分别是“文件”或“文件”。

Firefox 给出了这个类型列表：

{"0":"application/x-moz-file","1":"text/x-moz-url","2":"text/plain","3":"Files"}

【问题讨论】：

标签： firefox browser file-upload drag-and-drop webkit

【解决方案1】：

实际上，当您将文件夹拖到浏览器上时，您拖动的文件夹中的所有文件夹和文件都会显示出来..

例如在 chrome 中

它将显示“D:\my documents\Downloads\ 的索引”以及您修改文件的名称、大小和日期...

【讨论】：

不是我的意思。我说的是使用拖放 API。您描述的行为是当您让浏览器导航到 file:/// url 时。这不是我可以在 Web 服务中利用的东西。

【解决方案2】：

我找到了一种方法。这些信息可以通过 getAsEntry 在 dataTransfer.items 中找到，尽管在不同的浏览器中略有不同。此外，这没有指向您想要的文件的指针，尽管假设您没有同时上传两个具有相同名称的文件，您可以根据文件名找出它。这里没有太多工作要做，所以这是我能做的最好的。

just_the_files = (dataTransfer) ->
    real_files_set = {}
    for item in dataTransfer.items
        entry = item.getAsEntry?() or item.webkitGetAsEntry?() or item
        if entry.isFile
            real_files_set[entry.name] = true
     (file for file in dataTransfer.files when file.name of real_files_set)

【讨论】：

嗨，尼克感谢您的回答。你能告诉我你上面写了什么样的构造吗？我从未在 JavaScript 中见过它，尤其是字符 ->。我想了解和研究它，但我现在不知道它怎么称呼。谢谢。
这是 CoffeeScript。要查看等效的 JavaScript，请将其粘贴到 Try CoffeeScript 框中 on their website。

【解决方案3】：

在FF中有一个dataTransfer方法：mozGetDataAt(type, index)，当我使用type 'text/x-moz-url'时，它会返回文件的路径，如'files:/ //D:/abc/文件名'。有趣的是，文件夹/指令的路径末尾带有“/”，例如“files:///D:/abc/folder1/”。我想知道它在这种情况下是否有效？

【讨论】：

不要在答案部分发布问题。