背景

截图或页面复制图片，可以直接通过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事件

如何在Chrome粘贴图片直接上传的更多相关文章

  1. 捣鼓TinyMCE粘贴图片并上传+Flask后台

    好久没有编程了,最近需要完成一个小功能,为了方便,需要粘贴图片后上传到后台.前台编辑器用tinymce(N年前用过,我也就知道这个编辑器而已.这次使用下来感觉文档更丰富了),后台我用的Flask.昨天 ...

  2. ckeditor 实现ctrl+v粘贴图片并上传、word粘贴带图片

    公司做的项目需要用到文本上传功能. Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本 ...

  3. div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器

    应用简介:此文主要是描述如何在前端div中直接ctrl+v 粘贴图片,并上传到服务器,包括拖拽图片文件到div中 应用场景描述:用QQ或者其它切图软件截图,在指定的div中ctrl+v 粘贴并显示,点 ...

  4. 捣鼓TinyMCE 粘贴图片并上传+Django后台

    前面一篇写了上传到Flask后台,但是我不熟悉Flask,原先想学习一下,据说是轻量级. 但是我发现,学习会浪费我大量的时间,因为我并不是以这个为生的,我的目标只是要完成功能,让我自己能尽早使用起来, ...

  5. xhEditor实现ctrl+v粘贴word图片并上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  6. umeditor实现ctrl+v粘贴word图片并上传

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...

  7. ueditor实现ctrl+v粘贴word图片并上传

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

  8. kindeditor实现ctrl+v粘贴word图片并上传

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  9. base64格式的图片如何上传到oss

    ---恢复内容开始--- 对于base64图片的上传这个东西,一直是一个问题尤其是上传到oss.我们这次开发由于需要修剪图片,使用了h5的很多新特性. h5修剪图片,使用了我们的canvas.这个步骤 ...

随机推荐

  1. php 在 匿名函数中 调用自身。。

    //php闭包实现函数的自调用,也就是实现递归 function closure($n,$counter,$max){ //匿名函数,这里函数的参数加&符号是,引址调用参数自己 $fn = f ...

  2. win10 cmd 替换 powershell

    打开注册表编辑器,定位至: \HKEY_CLASSES_ROOT\Directory\Background\shell\Powershell\command cmd:  cmd.exe /s /k p ...

  3. sharepoint_study_13

    描述: 解决: 1.修改了密码和账户,找到对应的应用程序池,修改用户名和密码,重启iis. 2.站点上安装的产品(如:工作流)启动需要用户名和密码,找到对应的服务,修改用户名和密码并重启该服务.

  4. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_通过ILDasm.exe查看编译器如何将类型及其成员编译成元数据

    [实例代码] using System; public sealed class SomeType //-------------1 { //嵌套类 private class SomeNestedT ...

  5. Codeforces Round #532 (Div. 2)- A（思维）

    This morning, Roman woke up and opened the browser with nn opened tabs numbered from 11 to nn. There ...

  6. 10.Web组件复用

    1.静态包含(一个指令) 在软件工程中构建可复用组件可极大的提高软件生产效率.增强系统的可维护性HTML标记对于一个web应用系统中的页面都是通用的,比如公司标志.版权声明.导航菜单JSP中引用的we ...

  7. SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape错误原因及解决方法

    用Python打开文件: with open('C:\Users\PINPIN\test\file1.txt','r') as f2: pass 运行后直接就报错了: File "<i ...

  8. Autel MaxiSys Pro Description

    Autel MaxiSys pro MS908P is an evolutionary smart solution for specialized automotive diagnosis and ...

  9. GO 日志追加记录

    以追加的方式将程序输出到不同的日志文件,当日志文件超过10M大小时,自动清空文件. package tools import ( "fmt" "log" &qu ...

  10. mysql初始化

    注意:--install前,必须用mysql启动命令的绝对路径 # 制作MySQL的Windows服务,在终端执行此命令: mysqld --install # 移除MySQL的Windows服务,在 ...