如何在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中的同一事件：

另外两个阵列，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。

我发现Google chrome模型有些混乱。它为您提供了有关原始数据（文本/原始图像）的更多信息，这些信息只能使用内容可编辑的div进行访问，但对我来说不是很清楚。

Answer 1

我们的魔法酱就是：

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

其中handlepaste与您的非常相似，因此对于 Chrome 来说应该适合您。

不幸的是，上面的方法对于 FF 来说完全失败了，我们不愿意contenteditable在任何地方添加一个（特别是考虑到它必须处于焦点才能工作，而且我们不想抢走焦点）。