文档章节

js+HTML5实现图片粘贴上传功能

cccyb
 cccyb
发布于 2016/11/30 15:01
字数 244
阅读 20
收藏 1
点赞 0
评论 0

监听粘贴事件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

/** 粘贴上传图片 **/

document.getElementsByTagName("textarea")[0].addEventListener('paste'function(e) {

    var clipboard = e.clipboardData;

    for(var i=0,len=clipboard.items.length; i<len; i++) {

        if(clipboard.items[i].kind == 'file'|| clipboard.items[i].type.indexOf('image') > -1) {

            var imageFile = clipboard.items[i].getAsFile();

            var form = new FormData;

            form.append('t''ajax-uploadpic');

            form.append('avatar', imageFile);

            var callback = G.uploadpicCallback || function(type, data){};

            $.ajax({

                url: G.ROOT_URL+'sys/ajax',

                type: "POST",

                data: form,

                processData: false,

                contentType: false,

                beforeSend: function() {

                    callback('before');

                },

                error: function() {

                    callback('error');

                },

                success: function(url) {

                    callback('success', url);

                }

            })

            e.preventDefault();

        }

    }

});

其中只对textarea标签绑定粘贴事件,还调用了一个全局函数G.uploadpicCallback,使用上是这样的:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

G = {};

G.uploadpicCallback = function(type, src){

    type = type || 'before';

    var $the = $('#content');

    switch(type){

        // 开始上传

        case 'before':

            $the.attr('disabled''disabled');

            break;

        // 服务器返回错误

        case 'error':

            $the.attr('disabled'false);

            alert('图片上传失败');

            break;

        // 上传成功

        case 'success':

            $the.attr('disabled'false);

            $the.val($the.val()+'<img src="'+src+'" width="100%">');

            break;

    }

}

© 著作权归作者所有

共有 人打赏支持
cccyb
粉丝 30
博文 251
码字总数 22260
作品 1
西安
高级程序员
xhEditor v1.1.8 发布,开源XHTML在线编辑器

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE6、IE7、IE8、IE9、Firefox 3.0+、Opera 9.6+、Chrome 1.0+、Safari 3.22+。 该版本主要提供以...

V ⋅ 2011/07/10 ⋅ 0

文件上传组件--WebUploader

WebUploader 是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,延用原来的FLASH...

缪斯的情人 ⋅ 2014/07/15 ⋅ 12

xhEditor v1.1.8 发布,XHTML在线编辑器

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE6,IE7,IE8,IE9,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。 更新小记: 从2009年4月第...

YanisWang ⋅ 2011/07/08 ⋅ 1

pumelo/WebHeadPicker

#WebHeadPicker #Web头像拾取器插件 在网上找了一段时间,总的来说,cropper比较好。本项目基于cropper,以及一些互联网资源。 您是否应该使用本项目?如果您需要把头像直接上传到阿里云OSS...

pumelo ⋅ 2017/05/20 ⋅ 0

PESCMS TEAM 2.0.0 发布!支持PC端和移动端

很高兴告诉各位,PESCMS TEAM 开源的任务管理系统 2.0.0 版本正式发布了! 新版作出如下调整: 全新的界面设计,全面兼容PC(IE8+和现代浏览器)和移动端(安卓和苹果)。 PESCMS架构调整为最新的...

金拱门 ⋅ 2016/02/26 ⋅ 2

Python(二)借助七牛云通过脚本自动获取上传图片外链

概述 之前自己写博客的时候,每次的都需要通过将本地图片上传到七牛云,然后获取图片外链,再粘贴到MarkDown编辑器里面,如果一篇博客里面图片比较少的时候,还可以忍受,图片多了就感觉特别...

wustor ⋅ 2017/11/13 ⋅ 0

UEditor v1.1.7 发布,百度文本编辑器

Ueditor 是百度推出的一款开源在线 HTML 编辑器。文本编辑器 1.1.7 版本发布,该版本变化如下: 新增功能 增加表情本地化模式,可在config中配置是否开启本地化 flash的多图片上传 支持了源码...

小卒过河 ⋅ 2011/11/16 ⋅ 3

UCKeFu 1.2.1 发布,修正多个 BUG,增加图片消息支持

UCKeFu v1.2.1发布,UCKeFu基于JAVA语言开发,是一个全渠道融合的客户支持服务平台,聚合企业内部多个客服渠道,帮助各种行业各种规模的企业建立完整客服体系。 通过将邮件、短信、电话语音、...

优客服多渠道客服系统 ⋅ 2017/04/10 ⋅ 0

ueditor 1.4.2 & 文档更新发布

ueditor 1.4.2 & 文档更新发布,更新内容如下: 1.4.2 重构前后端交互功能 前端上传模块统一改用webuploader 整体重构了文件上传的配置方式,改为统一在后端配置,前后端自动打通,详细文档 ...

战毅 ⋅ 2014/05/16 ⋅ 13

DOClever 5.3.0 重磅发布,让你的项目文档纵享丝滑

现如今,很多互联网团队对于开发效率的要求越来越高,市面上也有越来越多的工具来辅助我们完成团队协作,但是很多工具都比较偏向重量级别,且闭源收费,那么今天,我想为各位介绍一款开源免费...

我不是肥羊 ⋅ 01/05 ⋅ 3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Windows下安装运行phpMyAdmin

首先确保安装了phpMyAdmin,其次要求服务器是打开的。 如果是在Windows下,建议下载安装WampServer,这是一个集成软件,集成了Apache+MySQL+PHP的开发环境,而且也自带了phpMyAdmin这个软件。...

临江仙卜算子 ⋅ 3分钟前 ⋅ 0

jdk1.8 安装及环境变量配置

1.根据jdk 的软件安装包,首先安装,jdk,

kuchawyz ⋅ 3分钟前 ⋅ 0

给Java字节码加上”翅膀“的JIT编译器

给Java字节码加上”翅膀“的JIT编译器 上面文章在介绍Java的内存模型的时候,提到过由于编译器的优化会导致重排序的问题,其中一个比较重要的点地方就是关于JIT编译器的功能。JIT的英文单词是...

九劫散仙 ⋅ 4分钟前 ⋅ 0

PCI简介(二)

1.x86处理器系统地址空间简介 1.1 CPU地址空间 CPU地址空间是指CPU所能寻址的空间大小,比如对于32位CPU来说,其所能寻址的空间大小为0~4G。这是由CPU自身的地址总线数目决定的。这段空间也被...

深山野老 ⋅ 5分钟前 ⋅ 0

spring中的InitializingBean接口

好久没更博了,真有点怀念,前段时间刚和上家公司say bye,这次进的是电商公司,今天刚开始看代码,逻辑很复杂。 今天看的注册功能,里面见到一个知识点,现在记录一下,今天看项目时见到里面...

千元机爱好者 ⋅ 7分钟前 ⋅ 0

机器学习:数据预处理之独热编码(One-Hot)

前言 ———————————————————————————————————————— 在机器学习算法中,我们经常会遇到分类特征,例如:人的性别有男女,祖国有中国,美国,法国等。 ...

NateHuang ⋅ 15分钟前 ⋅ 0

MyBatis之输入与输出(resultType、resultMap)映射

在MyBatis中,我们通过parameterType完成输入映射(指将值映射到sql语句的占位符中,值的类型与dao层响应方法的参数类型一致),通过resultType完成输出映射(从数据库中输出,通过dao层的方法查...

瑟青豆 ⋅ 16分钟前 ⋅ 0

屏蔽运营商广告劫持

在今天早上我查找知乎时再次遇到了恶心的运营商广告劫持,右下角硕大的广告直接让知乎挂掉了,我刷了五次知乎才好,之前休息的时候逛知乎也是多次加载错误,估计也是这劫持的锅,相信各位也遇...

gcudwork ⋅ 19分钟前 ⋅ 0

java web 进度条实现原理

资料路径 https://blog.csdn.net/fengsheng5210/article/details/79305026

zaolonglei ⋅ 20分钟前 ⋅ 0

命令行输出java版本与环境变量配置的不一样问题解决

问题:java10刚出来,本着好奇的心,急切的装了体验一下,然后实际项目需求还是java8,所以体验完了就把环境变量改回来了,但是出现了一个问题,命令行输出java版本与环境变量配置的不一样,...

消散了的诗意 ⋅ 22分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部