文档章节

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

风象南
 风象南
发布于 2016/11/30 15:01
字数 244
阅读 52
收藏 1

监听粘贴事件

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;

    }

}

本文转载自:http://www.thinkful.cn/archives/477.html

共有 人打赏支持
风象南
粉丝 50
博文 272
码字总数 22770
作品 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
0
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
722
1
PESCMS TEAM 2.0.0 发布!支持PC端和移动端

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

金拱门
2016/02/26
2.3K
2
文件上传组件--WebUploader

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

缪斯的情人
2014/07/15
18K
12
pumelo/WebHeadPicker

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

pumelo
2017/05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

起薪2万的爬虫工程师,Python需要学到什么程度才可以就业?

爬虫工程师的的薪资为20K起,当然,因为大数据,薪资也将一路上扬。那么,Python需要学到什么程度呢?今天我们来看看3位前辈的回答。 1、前段时间快要毕业,而我又不想找自己的老本行Java开发...

糖宝lsh
14分钟前
1
0
携手开发者共建云生态 首届腾讯云+社区开发者大会在京举办

本文由云+社区发表 北京时间12月15日,由腾讯云主办,极客邦科技、微信、腾讯TEG协办的首届腾讯云+社区开发者大会在北京朝阳悠唐皇冠假日酒店举办。在会上,腾讯云发布了重磅产品开发者平台以...

腾讯云加社区
34分钟前
1
0
人工智能时代员工如何证明其IT工作价值

机器人可以取代你的工作吗?你能帮助机器人完成它的工作吗?如果你正在考虑自己的职业生涯以及今后将如何发展,那么应该询问自己这些问题了。 机器人可以取代你的工作吗?你能帮助机器人完成它的...

Linux就该这么学
36分钟前
2
0
CPU性能过剩提升乏力影响未来行业发展吗?

虽然CPU仍然在不断发展,但是它的性能已经不再仅仅受限于单个处理器类型或制造工艺上了。和过去相比,CPU性能提升的步伐明显放缓了,接下来怎么办,成为横亘在整个行业面前的大问题。 自201...

linuxCool
47分钟前
2
0
使用Autowired和Qualifier解决多个相同类型的bean如何共存的问题

注意: 实现类UserServiceImpl,MyUserServiceImpl 需要区分:@Service("userServicel") @Service("myUserService") https://blog.csdn.net/russle/article/details/80287763......

qimh
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部