如何訪問webkit瀏覽器中的粘貼文件？ （作為Google Chrome）

Question

如果能夠在Stack Exchange上粘貼圖像而不是插入文件對話框，那將是非常方便的。 這里實現了類似的功能（是？），但僅適用於Webkit瀏覽器 。

我正在開發那樣做的用戶腳本 。 有趣的是，我從未完成從Webkit瀏覽器中的剪貼板獲取文件 （與原始圖像數據不同），而在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對象中得到的：

對於參考，這是Firefox中的相同事件：

Firefox實現中不存在另外兩個數組， items和types 。 當我復制文本或原始圖像數據時，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 。

我覺得google chrome模型有點令人困惑。 它為您提供了有關原始數據（文本/原始圖像）的更多信息，這些信息只能使用內容可編輯的div進行訪問，但對我來說並不是很清楚。

Answer 1

我們的神奇醬油只是：

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

handlepaste與你的非常相似，所以對你來說也適合Chrome。

不幸的是，上面的FF完全失敗了，我們不願意在任何地方添加一個contenteditable （特別是考慮到它必須成為焦點才能使其工作，我們不想竊取焦點）。