js複製、貼上到瀏覽器（原生、IE不相容）
阿新 • • 發佈：2018-12-20
一、最近有需求需要複製圖片（Ctrl+C）到瀏覽器進行貼上（Ctrl+V）然後進行貼上的內容上傳到伺服器，因以前上傳檔案都是通過外掛來進行實現，所以並沒有做過多的學習，以下程式碼是基於其他網友文章中提供的內容，主要程式碼也已經做了部分的註釋，如果不滿足需求，大可以在主要的API進行拓展。 二、
完整程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>JS複製+貼上到瀏覽器功能</title> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> </head> <body> <img src='' class='imgView'/> <script> //只相容最新瀏覽器 document.addEventListener('paste', function(event) { var isChrome = false; //not for ie11 某些chrome版本使用的是event.originalEvent if(event.clipboardData || event.originalEvent) { var clipboardData = (event.clipboardData || event.originalEvent.clipboardData); if(clipboardData.items) { // for chrome var items = clipboardData.items, len = items.length, blob = null; isChrome = true; //items.length比較有意思，初步判斷是根據mime型別來的，即有幾種mime型別，長度就是幾（待驗證） //如果貼上純文字，那麼len=1，如果貼上網頁圖片，len=2, items[0].type = 'text/plain', items[1].type = 'image/*' //如果使用截圖工具貼上圖片，len=1, items[0].type = 'image/png' //如果貼上純文字+HTML，len=2, items[0].type = 'text/plain', items[1].type = 'text/html' // console.log('len:' + len); // console.log(items[0]); // console.log(items[1]); // console.log( 'items[0] kind:', items[0].kind ); // console.log( 'items[0] MIME type:', items[0].type ); // console.log( 'items[1] kind:', items[1].kind ); // console.log( 'items[1] MIME type:', items[1].type ); //阻止預設行為即不讓剪貼簿內容在div中顯示出來 event.preventDefault(); //在items裡找貼上的image,據上面分析,需要迴圈 for(var i = 0; i < len; i++) { if(items[i].type.indexOf("image") !== -1) { console.log(items[i]); // console.log( typeof (items[i])); //getAsFile() 此方法只是living standard firefox ie11 並不支援 blob = items[i].getAsFile(); } } if(blob !== null) { var reader = new FileReader(); reader.onload = function(event) { // event.target.result 即為圖片的Base64編碼字串 var base64_str = event.target.result //可以在這裡寫上傳邏輯 直接將base64編碼的字串上傳（可以嘗試傳入blob物件，看看後臺程式能否解析） $('.imgView').attr('src',base64_str) uploadImgFromPaste(base64_str, 'paste', isChrome); } reader.readAsDataURL(blob); } } else { //for firefox setTimeout(function() { //設定setTimeout的原因是為了保證圖片先插入到div裡，然後去獲取值 var imgList = document.querySelectorAll('#tar_box img'), len = imgList.length, src_str = '', i; for(i = 0; i < len; i++) { if(imgList[i].className !== 'my_img') { //如果是截圖那麼src_str就是base64 如果是複製的其他網頁圖片那麼src_str就是此圖片在別人伺服器的地址 src_str = imgList[i].src; } } $('.imgView').attr('src',src_str) uploadImgFromPaste(src_str, 'paste', isChrome); }, 1); } } else { //for ie11 setTimeout(function() { var imgList = document.querySelectorAll('#tar_box img'), len = imgList.length, src_str = '', i; for(i = 0; i < len; i++) { if(imgList[i].className !== 'my_img') { src_str = imgList[i].src; } } $('.imgView').attr('src',src_str) uploadImgFromPaste(src_str, 'paste', isChrome); }, 1); } }) function uploadImgFromPaste(file, type, isChrome) { var formData = new FormData(); formData.append('image', file); formData.append('submission-type', type); var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://www.google/com'); xhr.onload = function() { if(xhr.readyState === 4) { if(xhr.status === 200) { var data = JSON.parse(xhr.responseText), } else { console.log(xhr.statusText); } }; }; xhr.onerror = function(e) { console.log(xhr.statusText); } return; var data = { img:file } xhr.send(JSON.stringify(data)); } </script> </body> </html>
*經測試，除了IE不相容之外，其他瀏覽器測試能夠正常使用 #因本人疏忽，導致原文的內容地址丟失，如有不當，可聯絡本人進行文章刪除