如何訪問webkit瀏覽器中的粘貼文件？ （如谷歌瀏覽器）

Question

如果能夠在Stack Exchange上粘貼圖像而不是插入文件對話框，這將非常方便。類似的功能是（是？）在這裏實施，但only for Webkit browsers。我正在開發userscript that does that。有趣的是，我從來沒有完成從Webkit瀏覽器中的剪貼板獲取file（這是從原始圖像數據不同），而在Firefox它的作品。

Firefox的解決方案：

div.addEventListener('paste', function(event){ 
    //I'm actually not sure what should event.originalEvent be. I copypasted this 
    var items = (event.clipboardData || event.originalEvent.clipboardData); 
    console.log("paste", items); 
    //Try to get a file and handle it as Blob/File 
    var files = items.items || items.files; 
    if(files.length>0) { 
     //Being lazy I just pick first file 
     var file = files[0]; 
     //handle the File object 
     _this.processFile(file); 

     event.preventDefault(); 
     event.cancelBubble = true; 
     return false; 
    } 
    }); 

之前，Chrome不具備的不錯的文檔，如Firefox有（我的意思是MDN），我試圖檢查發生了什麼事情。我複製了一個文件，並將其粘貼到Google Chrome（v39）中。這是我得到的DataTransfer對象在控制檯：

對於REFFERENCE，這裏是在Firefox中相同的事件：

另外兩個陣列，items和types是不在Firefox實現中。當我複製文字或原始圖像數據時，Chrome將其表示爲DataTransferItem。我想通了，這是最好的忽略這些：

//Being lazy I just pick first file 
    var file = files[0]; 
    //GOOGLE CHROME 
    if(file.getAsFile) { 
    console.log("DataTransferItem:", file); 
    //HTML or text will be handled by contenteditable div 
    if(file.type!="text/plain" && file.type!="text/html") { 
     //handle the File object 
     _this.processFile(file.getAsFile()); 
    } 
    } 
    else 
    ... 

到目前爲止，我從來沒有想過讓別的比text/plain或text/html。對於這些，.getAsFile返回null。

我發現谷歌鉻模型有點混亂。它爲您提供了有關原始數據（文本/原始圖像）的更多信息，只能使用內容可編輯div訪問，但對我來說不是很清楚。

Answer 1

我們的魔法就是：

$('body').bind('paste', handlepaste); 

哪裏handlepaste非常相似，你的，所以應該爲你工作就好了Chrome瀏覽器。

不幸的是，上面完全失敗的FF，我們不願意加入任何地方contenteditable（特別是考慮到它有處於焦點的這個工作，我們不想偷焦點）。