我們或多或少都使用過各式各樣的富文本編輯器，其中有一個很方便功能，復制一張圖片然后粘貼進文本框，這張圖片就被上傳了，那么這個方便的功能是如何實現的呢？

原理分析
提取操作：復制=>粘貼=>上傳
在這個操作過程中，我們需要做的就是：監聽粘貼事件=>獲取剪貼板里的內容=>發請求上傳
為方便理解下文，需要先明白幾點：

• 我們只能上傳網頁圖(在網頁上右鍵圖片，然后復制)和截圖(截圖工具截的圖片，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：（不截圖了，可自行試驗，其他瀏覽器同理<(￣