Ctrl+v 粘贴图片

我们平常使用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的方法。