国产又色又爽又高潮免费视频麻豆 ,日韩午夜男女乱婬真视频播放

我們或多或少都使用過各式各樣的富文本編輯器，其中有一個(gè)很方便功能，復(fù)制一張圖片然后粘貼進(jìn)文本框，這張圖片就被上傳了，那么這個(gè)方便的功能是如何實(shí)現(xiàn)的呢？
原理分析
提取操作：復(fù)制=粘貼=上傳
在這個(gè)操作過程中，我們需要做的就是：監(jiān)聽粘貼事件=獲取剪貼板里的內(nèi)容=發(fā)請(qǐng)求上傳
為方便理解下文，需要先明白幾點(diǎn)：
我們只能上傳網(wǎng)頁(yè)圖(在網(wǎng)頁(yè)上右鍵圖片，然后復(fù)制)和截圖(截圖工具截的圖片，eg：qq截圖)，不能粘貼上傳系統(tǒng)里的圖片(從桌面上、硬盤里復(fù)制)，他們是存在完全不同的地方的。截圖工具截的圖與在網(wǎng)頁(yè)點(diǎn)擊右鍵復(fù)制的圖是有些不同的，因此處理方式也不一樣。知悉paste event這個(gè)事件：當(dāng)進(jìn)行粘貼（右鍵paste/ctrl v）操作時(shí)，該動(dòng)作將觸發(fā)名為’paste’的剪貼板事件，這個(gè)事件的觸發(fā)是在剪貼板里的數(shù)據(jù)插入到目標(biāo)元素之前。如果目標(biāo)元素（光標(biāo)所在位置）是可編輯的元素（eg：設(shè)置了contenteditable屬性的div 。textarea并不行。），粘貼動(dòng)作將把剪貼板里的數(shù)據(jù)，以最合適的格式，插入到目標(biāo)元素里；如果目標(biāo)元素不可編輯，則不會(huì)插入數(shù)據(jù)，但依然觸發(fā)paste event 。數(shù)據(jù)在粘貼的過程中是只讀的。此段是翻譯于w3.org_the-paste-action ?？上У氖牵?jīng)過試驗(yàn)，發(fā)現(xiàn)chrome(當(dāng)前最新版)、firefox(當(dāng)前最新版)、ie11對(duì)paste事件的實(shí)現(xiàn)并不是完全按照w3c來的，各自也有區(qū)別(w3c的paste標(biāo)準(zhǔn)也因此只是草案階段) 。
test代碼及截圖如下:
chrome：

textarea /textarea div contenteditable style="width: 100px;height: 100px; border:1px solid" /div script document.addEventListener(’paste’, function (event) {console.log(event) })/script

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

【兼容chrome、firefox、ie11 js實(shí)現(xiàn)ctrl v粘貼上傳圖片】

event有clipboardData屬性，且clipboardData有item屬性，clipboardData.item中的元素（對(duì)象）有type和kind屬性；無論在哪進(jìn)行粘貼，均可觸發(fā)paste事件；在div（未特殊聲明時(shí)，本文div均指設(shè)置了contenteditable屬性的div）里粘貼截圖，不顯示圖片。img.src為base64編碼字符串；在div里粘貼網(wǎng)頁(yè)圖片，直接顯示圖片，img.src為圖片地址。firefox：

event有clipboardData屬性，clipboardData沒有item屬性；只有在textarea里或者可編輯的div（里才粘貼才觸發(fā)paste事件；在div里粘貼截圖，直接顯示圖片，img.src為base64編碼字符串；在div里粘貼網(wǎng)頁(yè)圖片，表現(xiàn)同chrome 。