H5---图片拖拽上传

HTML5实现图片拖拽上传，本功能依托了jQuery，可能还有些不足之处，希望大神多给小菜鸟提提建议。

在线演示地址：http://sandbox.runjs.cn/show/rv5a0evn

在线代码地址：http://runjs.cn/code/rv5a0evn

js代码

 1 /*
 2     obj.dragBoxId,必选,string,目标区域的ID
 3     obj.showImgId,必选,string,显示区域ID
 4     obj.fileSize,可选,int,默认500(KB),文件大小，
 5     obj.strRegExp,可选,string,默认*,正则表达式
 6     obj.activeClass,可选，string，携带目标进去可放区域时，可放区域的样式改变
 7 
 8 */
 9 function dragUpload(obj){
10     var $dragBox    = $(obj.dragBox),//jQuery对象
11         JdragBox    = $dragBox[0],//原生对象
12         $ImgCon     = $(obj.showImg),//显示区域
13         activeClass = obj.activeClass,
14         maxSize     = obj.fileSize || 500,
15         reg         = obj.strRegExp || /[*]/;
16 
17     //阻止浏览器默认行。 
18     $(document).on({ 
19         dragleave:function(e){//拖离 
20             e.preventDefault(); 
21         }, 
22         drop:function(e){//拖后放 
23             e.preventDefault(); 
24         }, 
25         dragenter:function(e){//拖进 
26             e.preventDefault(); 
27         }, 
28         dragover:function(e){//拖来拖去 
29             e.preventDefault(); 
30         } 
31     });
32 
33     $dragBox.on({
34         //携带目标进来的时候
35         dragenter:function(){
36             $dragBox.addClass(activeClass);
37         },
38         //携带目标出去的时候
39         dragleave:function(){
40             $dragBox.removeClass(activeClass);
41         }
42     });
43 
44     //携带目标释放
45     JdragBox.addEventListener('drop',function(e){
46         var fileList = e.dataTransfer.files;//获取文件对象
47 
48         //如果没有文件，直接结束方法
49         if( fileList.length == 0 ){
50             return fasle;
51         }
52         //为每一个file对象添加方法
53         for(var i = 0; i < fileList.length; i++ ){
54             Domake(fileList[i]);
55         }
56         $dragBox.removeClass(activeClass);
57     },false);
58 
59     //拿到file对象，判断类型，警告，以及渲染，操作
60     function Domake(fileObj){
61         var obj      = fileObj,
62             fileType = fileObj.type,
63             fileSize = fileObj.size,
64             reader   = new FileReader();
65 
66         //检查类型
67         if( !reg.test( fileType ) ){
68             alert('不是正确的数据类型');
69             return false;
70         }
71 
72         if( fileSize > maxSize*1024 ){
73             alert('素材大于了'+ maxSize +'KB');
74             return false;
75         }
76 
77         //readAsDataURL(file),读取文件，将文件以数据URL的形式保存在result的属性中
78         reader.readAsDataURL(obj);
79            // 如果文件加载完成，那么渲染
80         reader.onload = function(e) {
81              var $img = $('<img>').attr("src", e.target.result);
82              $ImgCon.append($img)
83         }
84         
85     }
86     //Domake end!
87 }
88 //dragUpload end