最近項目需求是獲得QQ截圖或者微信截圖，直接粘貼文本框內並發送
開發中使用paste事件，一直顯示clipboardData的items內容為空，一直以為獲得不到里面的，后來才發現items是一個偽數組，直接使用下面的方法就可以了
輸入框中要實現粘貼圖片功能，不能用input、textarea等輸入框作為父容器，因為input、textarea中只能接受字符串，對於html標簽不進行轉義以及渲染。
所以用contenteditable='true'屬性來使div(其他容器也可)實現可編輯，來模擬輸入框，實現粘貼圖片至輸入框中的效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style type="text/css" media="screen"> div{ width:100%; height:200px; background:#ccc; margin:10px auto; text-align:center; } </style> </head> <body> this is app-static.acc5.com/test/index.html <div contenteditable="true"></div> <div contenteditable="true"></div> <div><img id="myimg" ></div> </body> <script type="text/javascript"> //綁定粘貼事件 Ctrl+V bindPaste(); //綁定粘貼事件 function bindPaste(){ //定義變量存儲獲取的圖片內容 var blob; //獲取body對象 var body = document.getElementsByTagName("body")[0]; //定義body標簽綁定的粘貼事件處理函數 var fun=function(e){ //獲取clipboardData對象 var data=e.clipboardData||window.clipboardData; console.log('fun',data); //獲取圖片內容 blob=data.items[0].getAsFile(); //判斷是不是圖片，最好通過文件類型判斷 var isImg=(blob&&1)||-1; var reader=new FileReader(); if(isImg>=0){ //將文件讀取為 DataURL reader.readAsDataURL(blob); } //文件讀取完成時觸發 reader.onload=function(event){ //獲取base64流 var base64_str=event.target.result; //div中的img標簽src屬性賦值，可以直接展示圖片 console.log('base64_str',base64_str); document.getElementById('myimg').src=base64_str; } } //通過body標簽綁定粘貼事件，注意有些標簽綁定粘貼事件可能出錯 body.removeEventListener('paste',fun); body.addEventListener('paste',fun); } </script> </html>