js+HTML5实现图片粘贴上传功能
博客专区 > cccyb 的博客 > 博客详情
js+HTML5实现图片粘贴上传功能
cccyb 发表于1年前
js+HTML5实现图片粘贴上传功能
  • 发表于 1年前
  • 阅读 15
  • 收藏 1
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购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;

    }

}

共有 人打赏支持
粉丝 5
博文 235
码字总数 14263
×
cccyb
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: