如何在 Firefox 中从剪贴板获取数据

Question

我想在元素上触发 onpaste 事件以检索剪贴板中的数据（我想检查剪贴板中是否存在图像并将其上传到服务器）。它在 Chrome 上完美运行：

$('#textarea')[0].onpaste = function(event)
{
    var items = event.clipboardData.items;

    if (items.length)
    {
        var blob = items[0].getAsFile();
        var fr = new FileReader();

        fr.onload = function(e)
        {
            alert('got it!');
        }

        fr.readAsDataURL(blob);
    }
}

不适用于 Firefox：event.clipboardData.items 不存在。您知道如何在元素中检索 onpaste 事件吗？

Answer 1

您需要创建一个内容可编辑的 div 来保存粘贴时的图像

var pasteCatcher = $('<div/>',{'id':'container'});
$('body').append(pasteCatcher);
var pasteCatcher = document.getElementById('container');
               pasteCatcher.setAttribute("contenteditable", "");

那么你需要等待粘贴事件并处理它

 window.addEventListener("paste",processEvent);
function processEvent(e) {
//some functionality
}

同时编写代码从 contenteditable div 中抓取图像数据并将其发送到服务器。

Answer 2

好像没有。对不起。

http://support.mozilla.org/en-US/kb/Granting%20JavaScript%20access%20to%20the%20clipboard

JavaScript get clipboard data on paste event (Cross browser)

Answer 3

当然可以。在此示例中，我使用 Ctrl+V 后从剪贴板检索图像：

 <div id="foo" style="width: 200px; height: 200px" contenteditable="true">Paste here!</div>
 $('#foo')[0].onpaste = function(e)
{                   
    setTimeout(function()
    {
        var blob = $('#foo img').attr('src');


        $.post('/upload/image', {'data': blob}, function(result)
        {


        }, 'json'); 

    }, 200);
}

它适用于具有contenteditable 属性的<div> 元素，但不适用于<textarea>

附：很抱歉回答我自己的问题，但这段代码可能会对某人有所帮助。