在 dragenter 事件期间获取文件名答案

【问题标题】：Getting the filename during the dragenter event在 dragenter 事件期间获取文件名
【发布时间】：2012-02-04 11:10:46
【问题描述】：

我正在使用 JavaScript 和 HTML 开发一种交互式文件上传器，我需要在其中访问当前拖动的文件文件名（触发 dragenter 事件的文件名）。

但是有一个问题，events dataTransfer 成员不包含任何文件，而我真的需要在抛出 drop 事件之前知道文件名。有可能吗？

提前致谢。

【问题讨论】：

【解决方案1】：

我猜你可能必须为它声明一个局部变量....并记得在拖动开始时初始化它....拖动结束时杀死它...（拖动/放下）

在“DragStart”中分配它.....（注意：在 dragstart 中，您可以使用“event.dataTransfer.setData”为 dataTransfer 分配任何值......但在 DragEnter/DragOver 中无法访问）

因为“DragEnter”由于安全原因无法访问 dataTransfer.getData()... 它只能在“onDrop”操作中访问.....

请参阅以下链接： //这里不能使用获取数据（用于跨帧），原因是： http://msdn.microsoft.com/en-us/library/ie/ms536436(v=vs.85).aspx

//在 DragEnter/DragOver 中使用 dataTransfer.getData 不适用于 Chorme http://code.google.com/p/chromium/issues/detail?id=50009

//dataTransfer.getData 出于安全原因只能在 DROP 中访问.... http://code.google.com/p/chromium/issues/detail?id=2141

或者您可以查看以下链接...看看是否有帮助： http://weblog.bocoup.com/using-datatransfer-with-jquery-events/

更多：您也可以使用 localStorage/sessionStorage 调用，它将数据保存到浏览器缓存中，localStorage 可以在跨窗口（但相同的浏览器）中使用，sessionStorage 只能在同一个会话中访问。只需执行以下操作：在你的 DragStart ->

localStorage.setItem("DraggedFileName",myFileName);

在你的 DragEnter ->

var myFileName = undefined;
if(localStorage.getItem("DraggedFileName"))
myFileName = localStorage.getItem("DraggedFileName");

在你的 DropEvent 和 DragEnd ->

if(localStorage.getItem("DraggedFileName"))
    localStorage.removeItem("DraggedFileName"); //Remove after Drop/DragEnd, clear it

希望对你有帮助....

【讨论】：

我花了很多时间试图弄清楚这一点。我的结论是，目前的规范更加愚蠢和愚蠢。有关更多详细信息，请在此处阅读我的解释（咆哮）：stackoverflow.com/questions/11927309/…
为什么要使用 localStorage 而不是变量？