js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5440字，纯文字阅读大概需要8分钟。
内容图文
我们或多或少都使用过各式各样的富文本编辑器，其中有一个很方便功能，复制一张图片然后粘贴进文本框，这张图片就被上传了，那么这个方便的功能是如何实现的呢？
原理分析
提取操作：复制=>粘贴=>上传
在这个操作过程中，我们需要做的就是：监听粘贴事件=>获取剪贴板里的内容=>发请求上传
为方便理解下文，需要先明白几点：
- 我们只能上传网页图(在网页上右键图片，然后复制)和截图(截图工具截的图片，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展示：
Document
前端js处理逻辑:
用express.js搭的简易后台的接收逻辑：
需要node环境：安装node=>npm intall=>node app.js)
以上就是本文的全部内容，希望对大家的学习有所帮助。
内容总结
以上是互联网集市为您收集整理的js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)_javascript技巧全部内容，希望文章能够帮你解决js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。