从文件浏览器复制和HTML5剪贴板API粘贴

Question

我正在尝试为我的网页应用添加图像粘贴功能，使用标准程序：

$('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）进行相同操作时，结果只会得到一个文本字符串与文件路径或甚至包含文件类型图标的图像，而不是原始文件。

有没有办法正确处理来自文件浏览器的粘贴操作？

- NikitaBaksalyar

---

也许这个能帮到你？https://dev59.com/mmw15IYBdhLWcg3w4_3k - lemieuxster

@lemieuxster，谢谢你，但不幸的是我已经在使用被接受答案中提供的完全相同的解决方案。我的情况有点不同——虽然基本的粘贴功能运作良好，但从Finder粘贴时存在问题。 - NikitaBaksalyar

可能是Chrome的问题？在Safari或Firefox中我没有看到任何东西。https://code.google.com/p/chromium/issues/detail?id=361980 - lemieuxster

@lemieuxster，谢谢！这个错误报告完全解释了这种奇怪的行为。也许你应该将它作为答案添加到问题中，这样我就可以接受它了？ - NikitaBaksalyar

Answer 1

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

- lemieuxster

Answer 2

也许你想将图片作为data:粘贴。

前往查看HTML5将图片粘贴到页面。

- michelek