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 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
js编写选项卡效果
May 23 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
node.js如何操作MySQL数据库
Oct 29 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
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
python实现Floyd算法
2018/01/03 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
提升Python程序性能的7个习惯
2019/04/14 Python
Python实现Restful API的例子
2019/08/31 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
美国著名手表网站:Timepiece
2017/11/15 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
董事长岗位职责
2013/11/30 职场文书
大型演出策划方案
2014/05/28 职场文书
个人主要事迹材料
2014/08/26 职场文书
春季运动会开幕词
2015/01/28 职场文书
交通事故协议书范本
2016/03/19 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电