Js实现粘贴上传图片的原理及示例


Posted in Javascript onDecember 09, 2020

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

原理分析:
复制=>粘贴=>上传

在这个操作过程中,我们需要做的就是:监听粘贴事件=>获取剪贴板里的内容=>发请求上传

需要明白的是:

我们只能上传截图工具截的图片(qq截图、微信截图等),不能粘贴上传系统里的图片(从桌面上、硬盘里复制),因为他们是存在完全不同的地方。

知悉paste event这个事件:当进行粘贴(右键paste/ctrl+v)操作时,该动作将触发名为'paste'的剪贴板事件,这个事件的触发是在剪贴板里的数据插入到目标元素之前。如果目标元素(光标所在位置)是可编辑的元素(设置了contenteditable属性的div。textarea并不行),粘贴动作将把剪贴板里的数据,以最合适的格式,插入到目标元素里;如果目标元素不可编辑,则不会插入数据,但依然触发paste event。数据在粘贴的过程中是只读的。

监听了paste事件,也知道了表现形式,接下来就是如何获取数据了:

chrome有特定的方法,利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回调函数里获取到剪贴板里图片的base64编码字符串(无论是截图粘贴的还是网页图片复制粘贴的),ie11,firefox没有这样的api,不过依然有办法可以获取,因为数据已经表现在img的src里了,对于截图粘贴的,直接取img的src属性值(base64),对于网页粘贴的,则把地址传给后台,然后根据地址down下来,存在自己的服务器,最后把新地址返回来交给前端展示就ok了。为了保持一致性便于管理,统一将所有情况(截图、网页)中的img的src属性替换为自己存储的地址。

完整例子:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Js实现粘贴上传图片</title>
    <script src="jquery.js"></script>
</head>

<body>
    复制粘贴上传图片:
    <div id="content_img" contentEditable="true" style="width:500px;height:500px;border:1px solid #000;"></div>
    <script>
        document.getElementById('content_img').addEventListener('paste', function(e) {
        if (!(e.clipboardData && e.clipboardData.items)) {
            return;
        }
        for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
            var item = e.clipboardData.items[i];
            if (item.kind === "string") {
                item.getAsString(function(str) {
                    console.log(str);
                    alert("请粘贴图片上传");
                })
                $("#content_img").html(""); 
            } else if (item.kind === "file") {
                var blob = item.getAsFile();
                console.log(blob);
                if (blob.size === 0) {
                    return;
                }
                var data = new FormData();
                data.append("image", blob);
                $.ajax({
                    url: "http://www.yzmcms.com/upload.php",
                    type: 'POST',
                    cache: false,
                    data: data,
                    processData: false,
                    contentType: false,
                    dataType: "json", 
                    success: function(result) {
                        console.log(result);
                        if (result.status) {
                            var html = "<img src=" + result.data + " width='100' height='100'>";
                            $("#content_img").append(html);
                        } else {
                            console.log(result.message)
                        }
                    }
                });

                //阻止默认行为即不让剪贴板内容在div中显示出来
                e.preventDefault();
            }
        }
    });
    </script>
</body>

</html>

以上就是Js实现粘贴上传图片的原理及示例的详细内容,更多关于JS 粘贴上传图片的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
vue.js封装switch开关组件的操作
Oct 26 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 #Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 #Javascript
ES6中的类(Class)示例详解
Dec 09 #Javascript
JavaScript实现表单验证功能
Dec 09 #Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 #Javascript
javascript全局自定义鼠标右键菜单
Dec 08 #Javascript
javascript局部自定义鼠标右键菜单
Dec 08 #Javascript
You might like
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
Js面试算法详解
2018/04/08 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
在Django中限制已登录用户的访问的方法
2015/07/23 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python 命名规范知识点汇总
2020/02/14 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
车间统计员岗位职责
2014/01/05 职场文书
端午节演讲稿
2014/05/23 职场文书
文明家庭事迹材料
2014/12/20 职场文书
新郎答谢词
2015/01/04 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
同乡会致辞
2015/07/30 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
责任书格式
2019/04/18 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏