兼容chrome、firefox、ie11 js实现ctrl+v粘贴上传图片 _云知道

我们或多或少都使用过各式各样的富文本编辑器，其中有一个很方便功能，复制一张图片然后粘贴进文本框，这张图片就被上传了，那么这个方便的功能是如何实现的呢？
原理分析
提取操作：复制=粘贴=上传
在这个操作过程中，我们需要做的就是：监听粘贴事件=获取剪贴板里的内容=发请求上传
为方便理解下文，需要先明白几点：
我们只能上传网页图(在网页上右键图片，然后复制)和截图(截图工具截的图片，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

【兼容chrome、firefox、ie11 js实现ctrl v粘贴上传图片】

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 。