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
