js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)(auto.js粘贴代码)

编辑：rootadmin

推荐整理分享js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)(auto.js粘贴代码)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js实现粘贴功能,auto.js粘贴代码,js复制粘贴事件,js 粘贴图片,js 粘贴剪贴板,js获取粘贴的内容,js 粘贴图片,js复制粘贴事件,内容如对您有帮助，希望把文章链接给更多的朋友！

我们或多或少都使用过各式各样的富文本编辑器，其中有一个很方便功能，复制一张图片然后粘贴进文本框，这张图片就被上传了，那么这个方便的功能是如何实现的呢？

原理分析提取操作：复制=>粘贴=>上传在这个操作过程中，我们需要做的就是：监听粘贴事件=>获取剪贴板里的内容=>发请求上传为方便理解下文，需要先明白几点：

我们只能上传网页图(在网页上右键图片，然后复制)和截图(截图工具截的图片，eg：qq截图)，不能粘贴上传系统里的图片(从桌面上、硬盘里复制)，他们是存在完全不同的地方的。截图工具截的图与在网页点击右键复制的图是有些不同的，因此处理方式也不一样。知悉paste event这个事件：当进行粘贴（右键paste/ctrl+v）操作时，该动作将触发名为'paste'的剪贴板事件，这个事件的触发是在剪贴板里的数据插入到目标元素之前。如果目标元素（光标所在位置）是可编辑的元素（eg：设置了contenteditable属性的div。textarea并不行。），粘贴动作将把剪贴板里的数据，以最合适的格式，插入到目标元素里；如果目标元素不可编辑，则不会插入数据，但依然触发paste event。数据在粘贴的过程中是只读的。此段是翻译于w3.org_the-paste-action。可惜的是，经过试验，发现chrome(当前最新版)、firefox(当前最新版)、ie对paste事件的实现并不是完全按照w3c来的，各自也有区别(w3c的paste标准也因此只是草案阶段)。

test代码及截图如下:

chrome：

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

firefox：

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

ie：（不截图了，可自行试验，其他浏览器同理<(￣?￣)/,因为懒...）

event没有clipboardData属性；只在可编辑的div中粘贴才触发paste事件；在div里粘贴截图，直接显示图片，img.src为base编码字符串；在div里粘贴网页图片，表现同chrome。

监听了paste事件，也知道了表现形式，接下来就是如何获取数据了：chrome有特定的方法，利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回调函数里获取到剪贴板里图片的base编码字符串（无论是截图粘贴的还是网页图片复制粘贴的），ie，firefox没有这样的api，不过依然有办法可以获取，因为数据已经表现在img的src里了，对于截图粘贴的，直接取img的src属性值（base），对于网页粘贴的，则把地址传给后台，然后根据地址down下来，存在自己的服务器，最后把新地址返回来交给前端展示就ok了。为了保持一致性便于管理，统一将所有情况（截图、网页）中的img的src属性替换为自己存储的地址。因此可以得到以下核心代码（注释很全哦~~）：