javascript - Chrome的paste事件无法访问到图片文件

Question

今天项目里面的一个图片上传组件出问题了。需求：给一个输入框，用户在输入框中粘贴的时候，如果粘贴内容包含图片，就把图片上传到服务器并返回图片地址，然后显示出来。

实现思路：

1. 用一个p模拟输入框，设置属性contenteditable，假设这个p对应的DOM为contentEditablep。

2. 给输入框绑定paste事件，通过paste事件回调的event参数获取event.clipboardData这个对象，访问到粘贴板，然后操作粘贴的内容。

3. 判断粘贴的内容是不是图片类型，如果是就读取文件内容并Ajax上传。然后剩下的步骤就和普通的文件上传一样。

另外，由于是内网项目，所以不考虑其它浏览器。

实际效果：在MacBook的Chrome完美呈现，但是在Windows的Chrome下，如果通过QQ截屏然后粘贴图片是可以，但是如果从Windows文件目录中复制一个图片文件粘贴到输入框就无法获取到图片！

以下是示例代码：

contentEditablep.addEventListener("paste", function(e) {
  for (var i = 0; i < e.clipboardData.items.length; i++) {
    if (e.clipboardData.items[i].kind == "file" && /image\//.test(e.clipboardData.items[i].type)) {
      var imageFile = e.clipboardData.items[i].getAsFile();
      var fileReader = new FileReader();
      fileReader.onloadend = function(e) {
        // 这里省略了一部分代码，用来实现图片预览的
        uploadTrigger(imageFile); // 这个函数是用来调上传接口的
      };
      fileReader.readAsDataURL(imageFile);
      e.preventDefault();
      break;
    }
  }
});

求解！