Как получить данные из буфера обмена в Firefox - PullRequest
Новая
       29

Как получить данные из буфера обмена в Firefox

6 голосов
/ 11 февраля 2012

Я хотел бы вызвать событие 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 в элементе?

Ответы [ 3 ]

2 голосов
/ 07 марта 2013

Вам нужно создать один contenteditable 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 и отправить их на сервер.

1 голос
/ 11 февраля 2012
0 голосов
/ 11 февраля 2012

Конечно, я могу. В этом примере я получаю изображение из буфера обмена после использования 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);
}

Работает с <div> элементом, который имеет атрибут contenteditable, но не работает с <textarea>

P.S. Извините за ответ на мой вопрос, но этот фрагмент кода может кому-то помочь.

...