我们平常使用QQ或者微信聊天的时候都会用到Ctrl+V来粘贴文字或者图片,显得很理所当然。然而自己写的一个文本框或者文本域却只能粘贴文本,不能粘贴图片,这是为什么呢?
因为那个文本框并不是我们平常使用的input标签或者textarea标签,而是一个div。首先我们创建一个div,这个时候div还不可以当做文本框
这个时候在div加入contenteditable这个属性,设置为true,那这个div就可以输入了
<div id="myDiv" contenteditable="true"></div>
然后接下来就对这个可编辑div写方法
document.querySelector('#myDiv').addEventListener('paste',function(e){
var cbd = e.clipboardData;
var ua = window.navigator.userAgent;
// 如果是 Safari 直接 return
if ( !(e.clipboardData && e.clipboardData.items) ) {
return ;
}
if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
return;
}
for(var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i];
if(item.kind == "file"){
var blob = item.getAsFile();
if (blob.size === 0) {
return;
}
var reader = new FileReader();
var imgs = new Image();
imgs.file = blob;
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(imgs);
reader.readAsDataURL(blob);
document.querySelector('#myDiv').appendChild(imgs);
/*-----------------------不与后台进行交互 直接预览end-----------------------*/
}
}
}, false);
通过监听和判断来检测粘贴的文件类型,然后将它显示到div上,就实现了粘贴图片
至于为什么不适用input而是使用div,是因为input不支持querySelector的方法。