日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

兼容chrome、firefox、ie11 js實現(xiàn)ctrl+v粘貼上傳圖片( 二 )

云知道


ie11：（不截圖了，可自行試驗，其他瀏覽器同理(￣▽￣)/,因為懶...）

event沒有clipboardData屬性；只在可編輯的div中粘貼才觸發(fā)paste事件；在div里粘貼截圖，直接顯示圖片，img.src為base64編碼字符串；在div里粘貼網(wǎng)頁圖片，表現(xiàn)同chrome 。
監(jiān)聽了paste事件，也知道了表現(xiàn)形式，接下來就是如何獲取數(shù)據(jù)了：
chrome有特定的方法，利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回調(diào)函數(shù)里獲取到剪貼板里圖片的base64編碼字符串（無論是截圖粘貼的還是網(wǎng)頁圖片復(fù)制粘貼的），ie11，firefox沒有這樣的api，不過依然有辦法可以獲取，因為數(shù)據(jù)已經(jīng)表現(xiàn)在img的src里了，對于截圖粘貼的，直接取img的src屬性值（base64），對于網(wǎng)頁粘貼的，則把地址傳給后臺，然后根據(jù)地址down下來，存在自己的服務(wù)器，最后把新地址返回來交給前端展示就ok了 。為了保持一致性便于管理，統(tǒng)一將所有情況（截圖、網(wǎng)頁）中的img的src屬性替換為自己存儲的地址 。因此可以得到以下核心代碼（注釋很全哦~~）：
html展示：
headmeta charset="UTF-8"titleDocument/titlestylebody {display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;}#tar_box {width: 500px;height: 500px;border: 1px solid red;}/style前端js處理邏輯:
document.addEventListener(’paste’, function (event) {console.log(event)var isChrome = false;if ( event.clipboardData || event.originalEvent ) {//not for ie11某些chrome版本使用的是event.originalEventvar clipboardData = https://www.rkxy.com.cn/dnjc/(event.clipboardData || event.originalEvent.clipboardData);if ( clipboardData.items ) {// for chromevaritems = clipboardData.items,len = items.length,blob = null;isChrome = true;//items.length比較有意思，初步判斷是根據(jù)mime類型來的，即有幾種mime類型，長度就是幾（待驗證）//如果粘貼純文本，那么len=1，如果粘貼網(wǎng)頁圖片，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 );//阻止默認(rèn)行為即不讓剪貼板內(nèi)容在div中顯示出來event.preventDefault();//在items里找粘貼的image,據(jù)上面分析,需要循環(huán)for (var i = 0; ilen; 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對象，看看后臺程序能否解析）uploadImgFromPaste(base64_str, ’paste’, isChrome);}reader.readAsDataURL(blob);}} else {//for firefoxsetTimeout(function () {//設(shè)置setTimeout的原因是為了保證圖片先插入到div里，然后去獲取值var imgList = document.querySelectorAll(’#tar_box img’),len = imgList.length,src_str = ’’,i;for ( i = 0; ilen; i) {if ( imgList[i].className !== ’my_img’ ) {//如果是截圖那么src_str就是base64 如果是復(fù)制的其他網(wǎng)頁圖片那么src_str就是此圖片在別人服務(wù)器的地址src_str = imgList[i].src;}}uploadImgFromPaste(src_str, ’paste’, isChrome);}, 1);}} else {//for ie11setTimeout(function () {var imgList = document.querySelectorAll(’#tar_box img’),len = imgList.length,src_str = ’’,i;for ( i = 0; ilen; i) {if ( imgList[i].className !== ’my_img’ ) {src_str = imgList[i].src;}}uploadImgFromPaste(src_str, ’paste’, isChrome);}, 1);}})function uploadImgFromPaste (file, type, isChrome) {var formData = https://www.rkxy.com.cn/dnjc/new FormData();formData.append(’image’, file);formData.append(’submission-type’, type);var xhr = new XMLHttpRequest();xhr.open(’POST’, ’/upload_image_by_paste’);xhr.onload = function () {if ( xhr.readyState === 4 ) {if ( xhr.status === 200 ) {var data = JSON.parse( xhr.responseText ),tarBox = document.getElementById(’tar_box’);if ( isChrome ) {var img = document.createElement(’img’);img.className = ’my_img’;img.src = data.store_path;tarBox.appendChild(img);} else {var imgList = document.querySelectorAll(’#tar_box img’),len = imgList.length,i;for ( i = 0; ilen; i) {if ( imgList[i].className !== ’my_img’ ) {imgList[i].className = ’my_img’;imgList[i].src = data.store_path;}}}} else {console.log( xhr.statusText );}};};xhr.onerror = function (e) {console.log( xhr.statusText );}xhr.send(formData);}用express.js搭的簡易后臺的接收邏輯：

推薦閱讀