javascript - 如何在 JavaScript 中访问粘贴文件的文件名(而不仅仅是数据)？

Question

概览

将文件拖放到页面上时，您可以在处理所有拖放相关事件时通过 event.dataTransfer.files 获取文件。每个文件对象都有一个名称属性。

将文件粘贴到页面上时，您会在 onpaste 事件中通过 event.clipboardData.items(它不完全是数组或普通对象，但我离题了)获得“项目”。 item 对象然后有一个 getAsFile() 方法，但它返回一个 Blob，而不是一个文件，因此缺少 name 属性。

我想做什么

我想获取文件名，以便稍后上传图像时将其作为元数据与图像一起存储。

Chrome 只是有问题吗？

您可能会认为他们只是为此目的重用 event.dataTransfer，但这是未定义的。您还会认为 getAsFile() 会返回一个文件，但浏览器制造商再次决定反对显而易见的做法。以下是 getAsFile 应该做什么的规范:http://www.w3.org/TR/html/editing.html#dom-datatransferitem-getasfile

抢占一些不可避免的评论:

这一切至少在 Chrome 中是正确的。假设我现在只关心 Chrome，可能还有最新版本的 Safari 和 Firefox。

我在其他地方的评论中看到，由于“明显的安全问题”，人们似乎认为浏览器“永远不会”允许复制/粘贴文件，但它们确实允许拖放文件，所以让我们跳过过去那个有缺陷的论点。

结论:

有什么办法可以得到粘贴文件的名称吗？这只是 Chrome 实现中的一个错误吗？

更新

我在 codepen 上创建了一个笔来演示这个问题:http://codepen.io/lerouxb/pen/hiLux看起来 Chrome 在这里也有问题，所以我提交了一个错误:https://code.google.com/p/chromium/issues/detail?id=361145

Answer 1

Chrome 是唯一完全实现剪贴板 API 的浏览器。而且，正如您所注意到的，粘贴的项目以 Blob 的形式提供。目前还不能 100% 清楚这是否是 Chrome 中 Clipboard API 实现的错误。规范表明它可能是，但这在 Chrome 中已经存在了一段时间，因此您需要解决它。这里的另一个想法是没有文件名，因为没有文件，只有剪贴板数据。如果您想“命名”粘贴的项目，您需要征求用户的意见。