javascript - Chrome的paste事件无法访问到图片文件
天蓬老师
天蓬老师 2017-04-11 09:43:15
0
0
677

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

实现思路:

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

求解!

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

Antworte allen(0)
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage