Jak uzyskać dane ze schowka w Firefox

Question

Chciałbym wywołać zdarzenie onpaste na elemencie w celu pobrania danych w schowku (chcę sprawdzić, czy obraz istnieje w schowku i załadować go do serwera). Działa on idealny na 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); 
    } 
} 

Nie działa na Firefox: event.clipboardData.items nie istnieje. Czy masz pojęcie, w jaki sposób pobrać element onpaste w elemencie?

Answer 1

Wygląda na to, że nie. Przepraszam.

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

JavaScript get clipboard data on paste event (Cross browser)

Answer 2

Oczywiście mogę. W tym przykładzie odzyskać obraz ze schowka po użyciu 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); 
} 

Współpracuje z <div> elementu, który ma atrybut contenteditable, ale nie działa z <textarea>

PS: Przepraszamy za odpowiedź na moje własne pytanie, ale ten fragment kodu może pomóc komuś.

Answer 3

Musisz utworzyć jeden contenteditable div, które będą trzymać obraz na pastę

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

następnie trzeba czekać na pasty zdarzenia i procesu to

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

także napisać kod, aby pobrać dane obrazu z contenteditable div i wyślij je na serwer.