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

Question

我正在尝试使用标准例程向我的 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) 结果我只得到一个带有文件路径的文本字符串，甚至是一个带有文件类型图标而不是原始文件的图像。

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

Answer 1

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

Answer 2

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

去看看HTML5 paste image to page

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

Pasting from a file browser and HTML5 Clipboard API

html

javascript

clipboarddata