js實現ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)_javascript技巧
來源：懂視網
責編：小采
時間：2020-11-27 20:52:01
js實現ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)_javascript技巧
js實現ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)_javascript技巧:我們或多或少都使用過各式各樣的富文本編輯器，其中有一個很方便功能，復制一張圖片然后粘貼進文本框，這張圖片就被上傳了，那么這個方便的功能是如何實現的呢？ 原理分析 提取操作：復制=>粘貼=>上傳 在這個操作過程中，我們需要做的就是：監聽粘貼事件=>
導讀js實現ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)_javascript技巧:我們或多或少都使用過各式各樣的富文本編輯器，其中有一個很方便功能，復制一張圖片然后粘貼進文本框，這張圖片就被上傳了，那么這個方便的功能是如何實現的呢？ 原理分析 提取操作：復制=>粘貼=>上傳 在這個操作過程中，我們需要做的就是：監聽粘貼事件=>
我們或多或少都使用過各式各樣的富文本編輯器，其中有一個很方便功能，復制一張圖片然后粘貼進文本框，這張圖片就被上傳了，那么這個方便的功能是如何實現的呢？
原理分析
提取操作：復制=>粘貼=>上傳
在這個操作過程中，我們需要做的就是：監聽粘貼事件=>獲取剪貼板里的內容=>發請求上傳
為方便理解下文，需要先明白幾點：
我們只能上傳網頁圖(在網頁上右鍵圖片，然后復制)和截圖(截圖工具截的圖片，eg：qq截圖)，不能粘貼上傳系統里的圖片(從桌面上、硬盤里復制)，他們是存在完全不同的地方的。
截圖工具截的圖與在網頁點擊右鍵復制的圖是有些不同的，因此處理方式也不一樣。
知悉paste event這個事件：當進行粘貼（右鍵paste/ctrl+v）操作時，該動作將觸發名為'paste'的剪貼板事件，這個事件的觸發是在剪貼板里的數據插入到目標元素之前。如果目標元素（光標所在位置）是可編輯的元素（eg：設置了contenteditable屬性的div。textarea并不行。），粘貼動作將把剪貼板里的數據，以最合適的格式，插入到目標元素里；如果目標元素不可編輯，則不會插入數據，但依然觸發paste event。數據在粘貼的過程中是只讀的。此段是翻譯于w3.org_the-paste-action。
可惜的是，經過試驗，發現chrome(當前最新版)、firefox(當前最新版)、ie11對paste事件的實現并不是完全按照w3c來的，各自也有區別(w3c的paste標準也因此只是草案階段)。
test代碼及截圖如下:
chrome：
- event有clipboardData屬性，且clipboardData有item屬性，clipboardData.item中的元素（對象）有type和kind屬性；
- 無論在哪進行粘貼，均可觸發paste事件；
- 在div（未特殊聲明時，本文div均指設置了contenteditable屬性的div） 里粘貼截圖，不顯示圖片。img.src為base64編碼字符串；
- 在div里粘貼網頁圖片，直接顯示圖片，img.src為圖片地址。
firefox：
- event有clipboardData屬性，clipboardData沒有item屬性；
- 只有在textarea里或者可編輯的div（里才粘貼才觸發paste事件；
- 在div里粘貼截圖，直接顯示圖片，img.src為base64編碼字符串；
- 在div里粘貼網頁圖片，表現同chrome。
ie11：（不截圖了，可自行試驗，其他瀏覽器同理<(￣▽￣)/,因為懶...）
event沒有clipboardData屬性；
只在可編輯的div中粘貼才觸發paste事件；
在div里粘貼截圖，直接顯示圖片，img.src為base64編碼字符串；
在div里粘貼網頁圖片，表現同chrome。
監聽了paste事件，也知道了表現形式，接下來就是如何獲取數據了：
chrome有特定的方法，利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回調函數里獲取到剪貼板里圖片的base64編碼字符串（無論是截圖粘貼的還是網頁圖片復制粘貼的），ie11，firefox沒有這樣的api，不過依然有辦法可以獲取，因為數據已經表現在img的src里了，對于截圖粘貼的，直接取img的src屬性值（base64），對于網頁粘貼的，則把地址傳給后臺，然后根據地址down下來，存在自己的服務器，最后把新地址返回來交給前端展示就ok了。為了保持一致性便于管理，統一將所有情況（截圖、網頁）中的img的src屬性替換為自己存儲的地址。因此可以得到以下核心代碼（注釋很全哦~~）：
html展示：
前端js處理邏輯:
用express.js搭的簡易后臺的接收邏輯：
需要node環境：安裝node=>npm intall=>node app.js)
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
js實現ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)_javascript技巧
js實現ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)_javascript技巧:我們或多或少都使用過各式各樣的富文本編輯器，其中有一個很方便功能，復制一張圖片然后粘貼進文本框，這張圖片就被上傳了，那么這個方便的功能是如何實現的呢？ 原理分析 提取操作：復制=>粘貼=>上傳 在這個操作過程中，我們需要做的就是：監聽粘貼事件=>
