文档章节

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

风象南
 风象南
发布于 2016/11/30 15:01
字数 244
阅读 43
收藏 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

共有 人打赏支持
风象南
粉丝 38
博文 272
码字总数 22696
作品 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
文件上传组件--WebUploader

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

缪斯的情人
2014/07/15
18K
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
720
1
pumelo/WebHeadPicker

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

pumelo
2017/05/20
0
0
PESCMS TEAM 2.0.0 发布!支持PC端和移动端

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

金拱门
2016/02/26
2K
2

没有更多内容

加载失败,请刷新页面

加载更多

C++基础知识

链接:https://zhuanlan.zhihu.com/p/38399566 本文主要提一下以下三个区别: 引用必须初始化,而指针可以不初始化。 我们在定义一个引用的时候必须为其指定一个初始值,但是指针却不需要。 ...

悲催的古灵武士
12分钟前
0
0
Oracle备份脚本,保留10天数据

@echo off echo 删除10天前的备分文件和日志forfiles /p "D:\oracleback\backfile" /m *.dmp /d -10 /c "cmd /c del @path" forfiles /p "D:\oracleback\backfile" /m *.log /d -10......

lyle_luo
14分钟前
0
0
window版mysql备份数据

@echo off ::title name title db_backup ::color is green COLOR 2 ::defined value set yy=%date:~0,4% set mm=%date:~5,2% set dd=%date:~8,2% if /i %time:~0,2% lss 10 set hh=0%time:~......

恋码之子
17分钟前
0
0
hashmap嘿嘿嘿

1、jdk1.7 数组加链表 2、链表存放数据:hashcode相同,Entry{key:键 value:值 next:下一个节点} 3、取模算法,计算出存放数组的下标 int index = key.hashCode()%tables.length;...

熊猫你好
29分钟前
0
0
ca证书创建和docker-api证书设置

openssl genrsa -aes256 -out ca-key.pem 4096 // 这一步的密码千万不能忘记,下面要用到 openssl req -new -x509 -days 3650 -key ca-key.pem -sha256 -out ca.pem# 国家:CN# 省:.# 市......

chenbaojun
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部