今天项目里面的一个图片上传组件出问题了。需求:给一个输入框,用户在输入框中粘贴的时候,如果粘贴内容包含图片,就把图片上传到服务器并返回图片地址,然后显示出来。
实现思路:
用一个p
模拟输入框,设置属性contenteditable
,假设这个p
对应的DOM为contentEditablep
。
给输入框绑定paste
事件,通过paste
事件回调的event
参数获取event.clipboardData
这个对象,访问到粘贴板,然后操作粘贴的内容。
判断粘贴的内容是不是图片类型,如果是就读取文件内容并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;
}
}
});
求解!
欢迎选择我的课程,让我们一起见证您的进步~~