从文件浏览器和 HTML5 剪贴板 API 粘贴答案

【问题标题】：Pasting from a file browser and HTML5 Clipboard API从文件浏览器和 HTML5 剪贴板 API 粘贴
【发布时间】：2015-06-25 14:59:34
【问题描述】：

我正在尝试使用标准例程向我的 Web 应用程序添加图像粘贴功能：

$('textarea').on('paste', function (ev) {
    var clipboardData = ev.originalEvent.clipboardData;

    $.each(clipboardData.items, function (i, item) {
        if (item.type.indexOf("image") !== -1) {
            var reader = new FileReader();

            reader.readAsDataURL(item.getAsFile());
            reader.addEventListener('loadend', ...);
            ...
        }
    });
});

可在此处找到完整示例：http://jsfiddle.net/t8t2zj6k/

当我从图像查看器软件复制和粘贴图像时，它可以正常工作，但是当我尝试使用文件浏览器（例如 Mac 上的 Finder 或 Linux 上的 Nautilus）做同样的事情时，我只得到带有文件路径的文本字符串，甚至是带有文件类型图标而不是原始文件的图像。

有什么方法可以正确处理来自文件浏览器的粘贴？

【问题讨论】：

这可能对您有帮助吗？ stackoverflow.com/questions/6333814/…
@lemieuxster，谢谢，但不幸的是，我已经在使用已接受的答案中提供的完全相同的解决方案。我的情况有点不同 - 虽然基本粘贴功能运行良好，但从 Finder 粘贴存在问题。
似乎是 Chrome 的问题？我在 Safari 或 Firefox 中看不到任何内容。 code.google.com/p/chromium/issues/detail?id=361980
@lemieuxster，谢谢！错误报告完全解释了这种奇怪的行为。也许您应该将其添加为问题的答案，以便我接受？

标签： javascript html clipboarddata

【解决方案1】：

似乎可能是 Chrome 的问题？我在 Safari 或 Firefox 中看不到任何内容。 http://code.google.com/p/chromium/issues/detail?id=361980

【讨论】：

【解决方案2】：

也许您想将图像粘贴为data:

去看看HTML5 paste image to page

【讨论】：