使用 HTML/JavaScript 检测本地文件拖放答案

【问题标题】：Detecting local file drag'n'drop with HTML/JavaScript使用 HTML/JavaScript 检测本地文件拖放
【发布时间】：2010-01-07 05:53:43
【问题描述】：

有一个 HTML 文本区域。当本地文件被拖放到文本区域时，我能够捕捉到该事件。但是如何获取拖放文件的名称呢？（最终要修改并插入到textarea中。）

在这种情况下，以下表达式返回 None：

event.dataTransfer.files
event.dataTransfer.getData('text/plain')

我为 Firefox 3 做了一个简短的示例，这是我目前的目标平台。

<script>
function init() {
    document.getElementById('x').addEventListener('drop', onDrop, true)
}
function onDrop(event) {
    var data = event.dataTransfer.getData('text/plain')
    event.preventDefault()
    alert('files: ' + event.dataTransfer.files + ' && data: ' + data + '.')
}
</script>

<body onload='init()'>
<textarea cols=70 rows=20 id='x'></textarea>

【问题讨论】：

我想要本地文件路径。

标签： javascript html firefox drag-and-drop

【解决方案1】：

这有点晚了 - 但我认为您正在寻找的是：

event.dataTransfer.files[0].name

您还可以获得以下属性：

event.dataTransfer.files[0].size
event.dataTransfer.files[0].type

您可以使用以下内容循环遍历这些文件：

var listOfNames='';
for(var i=0,tot=event.dataTransfer.files.length; i<tot; i++){
    listOfNames+=event.dataTransfer.files[i].name + '\r\n';
}

顺便说一句 - 如果您使用的是 jQuery，那么可以在这里找到 dataTransfer 对象：

event.originalEvent.dataTransfer.files[0].name

【讨论】：

我想要本地文件路径。
如果你控制台记录文件对象，你会发现它，使用类似的东西（假设你使用的是 jQuery）：console.log(event.originalEvent.dataTransfer.files[0])

【解决方案2】：

不知道它是否仍然相关，但我遇到了同样的问题。以下是我的解决方法：

使用单个输入字段 (type="file") 创建一个普通的上传表单
将此 HTML 属性添加到输入字段：

dropzone="复制文件：图像/png 文件：图像/jpg 文件：图像/jpeg"
设置 JQuery 监听器或其他任何东西来捕捉输入字段上的“drop”事件

当您在输入字段中拖放本地图像时，“值”属性会自动填充，您可以像处理任何其他 HTML 表单一样处理它。

我还将表单包装到另一个 HTML 元素 (div) 中，设置 div 的大小并通过 CSS 设置溢出：隐藏 - 这样，您就可以摆脱“浏览”按钮。这不是很好，但它有效。我还使用AjaxForm 插件在后台上传图片 - 效果很好。

【讨论】：

“当您在输入字段中拖放本地图像时，“值”属性会自动填充，您可以像处理任何其他 HTML 表单一样处理它”您能解释一下吗？我试过了，但我不明白如何将值设置为输入类型文件。这不应该因为一些安全风险而被拒绝吗？
据我记得你不需要明确地做任何事情。但是，为了处理带有图像的表单，输入字段必须具有值。此值无法通过 Javascript 设置。但是如果你将图片拖放到输入框，“value”属性会自动设置，并且可以提交表单。

【解决方案3】：

据我所知，您需要获取nsIFile 的实例才能获取文件路径（File 类不提供此功能）。
此 MDC 页面解释了如何执行此操作：https://developer.mozilla.org/En/DragDrop/Recommended_Drag_Types#file。
请注意，虽然没有在上一个链接中列出，但获取nsIFile 实例需要权限提升（参见我对Can I drag files from the desktop to a drop area in Firefox 3.5 and initiate an upload? 的回答显示如何执行此操作）。

【讨论】：

MDC...你的意思是 MDN :-)

【解决方案4】：

我通过在“放置”区域上检测 mouseover 和 mousedown 来做到这一点

【讨论】：

【解决方案5】：

Alemjerus 是正确的，您无法访问您要查找的内容。

您在回复他的评论时提到的行为是某些浏览器的默认行为。例如，对于此条目的 stackoverflow textarea，如果我使用 Safari 并将文件拖入其中，它会将文件的路径放入 textarea。另一方面，对于 firefox 3.5，它会尝试使用浏览器打开文件。

基本上，您尝试实现的“拖放”功能是由客户端计算机上的浏览器和操作系统处理的——您不能为此目的使用 Javascript。

【讨论】：

我知道 JS 中存在安全性。但是在这种特殊情况下，您和 alemjerus 是错误的。安装 Firefox 3.6 并运行纯 html/js 示例：developer.mozilla.org/En/DragDrop/DataTransfer#Example 您不仅可以访问文件名，还可以访问其内容。我仍然无法挖掘的一件事是如何获取 full 文件路径...
alemjerus 和 Skone 是事实上是正确的。在 Firefox 3.6 (developer.mozilla.org/en-US/Firefox/Releases/3.6#HTML) 中添加了本地文件访问，最初于 2010 年 1 月 21 日 (en.wikipedia.org/wiki/Firefox_3.6) 在他们发布答案后发布。 stackoverflow 上有一个标记过时答案的功能会很棒。

【解决方案6】：

出于安全原因，您不能使用 Javascript 来执行此操作。 Javascript VM 无法直接访问 OS 文件系统。您只能拖放文本。

【讨论】：

但这不是通常的直接访问：用户根据自己的意愿删除文件。一个应用程序只需要一个文件名，而不是更多。这里有什么问题？例如，以下可视化编辑器能够获取删除文件的名称（不幸的是，您需要登录）：livejournal.com/update.bml，它仍然由 HTML 组成。
不再是真的了。任何具有 dataTransfer.files 的浏览器都可以读取文件名。