如何在Chrome粘贴图片直接上传


背景

截图或页面复制图片,可以直接通过Ctrl+v 粘贴上传图片

原理

操作:复制(截图)=>粘贴=>上传

监听粘贴事件=>获取剪贴板里的内容=>发请求上传

浏览器:Chrome、IE11

Chrome浏览器

1、通过监听粘贴事件,event有clipboardData属性,且clipboardData有item属性

2、获取剪切板的base64编码字符串,传到后台服务器

3、服务器获取到base64编码字符串转化为图片保存服务器

4、前台获取图片名并展示

IE11

1、IE11是没有event有clipboardData属性的,所以不能直接获取base64编码字符串

2、页面放置一个带有contenteditable属性的div容器,用于接收IE粘贴的图片,PS:IE粘贴事件需要在设置了contenteditable属性的div粘贴才会触发

3、当进行粘贴操作,让焦点在div容器中,这时粘贴事件才会触发,DIV中直接生成IMG

4、从IMG中src获取base64编码字符串,传到后台服务器

5、服务器获取到base64编码字符串转化为图片保存服务器

6、前台获取图片名并展示

注意点:Chrome和IE11 触发paste事件的区别

1、Chrome无论在哪进行粘贴,均可触发paste事件
2、IE11只能在div中触发paste事件


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM