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：

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

1. event有clipboardData属性，且clipboardData有item属性，clipboardData.item中的元素（对象）有type和kind属性；
2. 无论在哪进行粘贴，均可触发paste事件；
3. 在div（未特殊声明时，本文div均指设置了contenteditable属性的div） 里粘贴截图，不显示图片。img.src为base64编码字符串；
4. 在div里粘贴网页图片，直接显示图片，img.src为图片地址。

firefox：

1. event有clipboardData属性，clipboardData没有item属性；
2. 只有在textarea里或者可编辑的div（里才粘贴才触发paste事件；
3. 在div里粘贴截图，直接显示图片，img.src为base64编码字符串；
4. 在div里粘贴网页图片，表现同chrome。
   

ie11：（不截图了，可自行试验，其他浏览器同理b4d92b8d0d10f967e1cabc607dfe08a0npm intall=>node app.js)

以上就是本文的全部内容，希望对大家的学习有所帮助。