首页 > Chrome的paste事件无法访问到图片文件

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

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

实现思路:

  1. 用一个div模拟输入框,设置属性contenteditable,假设这个div对应的DOM为contentEditableDiv

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

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

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

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

以下是示例代码:

contentEditableDiv.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;
    }
  }
});

求解!

【热门文章】
【热门文章】