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

时间:2015-04-18 19:03:59

标签: javascript html5 clipboarddata

我正在尝试使用标准例程向我的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)做同样的事情时,我只获得带文件路径的文本字符串,甚至是带有文件类型图标而不是原始文件的图像。

有没有办法正确处理文件浏览器中的粘贴?

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:0)

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

去看看HTML5 paste image to page