[Java教程]上传图片(基于zepto.js)
0 2016-06-21 15:00:06
效果如下:
![bc91bb04e6e9c61e24c974e4440db8f2.gif](https://i-blog.csdnimg.cn/blog_migrate/499f983d0e151ba675b514a54f7b4793.gif)
![bc91bb04e6e9c61e24c974e4440db8f2.gif](https://i-blog.csdnimg.cn/blog_migrate/499f983d0e151ba675b514a54f7b4793.gif)
1
2
4 5 6 7
html
1 .basicInfo .item{ padding:.5rem .5rem 0; border-top:.3rem solid #eeeeee;} 2 .basicInfo li{ overflow:hidden; margin-bottom:.5rem;line-height:2.1rem; border-bottom:1px solid #e3e3e3;} 3 .basicInfo li:last-child{ border-bottom:none;} 4 .basicInfo input[type="text"]{ height:2rem; line-height:2rem;} 5 .basicInfo textarea{ height:8rem; line-height:1.5rem;} 6 .basicInfo .otherPic{ min-height:3rem;} 7 .basicInfo .otherPic .addPic{ height:3rem; line-height:3rem; font-size:3rem; margin-bottom:.5rem;} 8 .basicInfo .otherPic img{ margin:0 .5rem .5rem 0; width:3rem; height:3rem; vertical-align:top; border:1px solid #ddd;} 9 .basicInfo .yy_inputFile{ position:absolute; top:0; left:0; width:3rem; height:3rem; opacity:0;}10 .basicInfo .aboutPic{ margin-bottom:.5rem; line-height:1.5rem; }
js:1 var img_arr = new Array(); 2 //相关图片 3 $(page).on('change','#other_inputFile',function () { 4 $(this).resizeImage({ 5 that:this, 6 cutWid:'', 7 quality:0.6, 8 limitWid:710, 9 success:function (data) { 10 var len = $('#showOtherImage').find('img').size(); 11 img_arr[len] = data.base64; 12 var img = '
' + 13 '
!['%20+%20img_arr%5Blen%5D%20+%20']('%20+%20img_arr%5Blen%5D%20+%20')
' + 14 '
'+ 15 '
'; 16 $('#showOtherImage').append(img); 17 if(img_arr.length == 9){ 18 $('#openIdCardImg').hide(); 19 return false; 20 } 21 } 22 }); 23 this.value = ''; 24 }); 25 26 //删除相关图片 27 $(page).on('click','.deletedImages',function () { 28 var sid = $(this).attr('sid'); 29 30 img_arr.splice(sid,1); 31 $(this).parent().remove(); 32 33 $('#showOtherImage').html(''); 34 for( var i=0; i < img_arr.length; i++) { 35 var img = '
' + 36 '
!['%20+%20img_arr%5Bi%5D%20+%20']('%20+%20img_arr%5Bi%5D%20+%20')
' + 37 '
'+ 38 '
'; 39 $('#showOtherImage').append(img); 40 } 41 42 if(img_arr.length < 9){ 43 $('#openIdCardImg').show(); 44 }else{ 45 $('#openIdCardImg').hide(); 46 } 47 }); 48 49 /* 50 * 裁剪图片 51 * $(id).resizeImage({ 52 * that:this, //当前图片对象 53 * cutWid:'', //裁剪尺寸 54 * quality:0.6, //图片质量0~1 55 * limitWid:400, //最小宽度 56 * success:function (data) { 57 * do something... 58 * } 59 * }) 60 * 61 * */ 62 $.fn.resizeImage = function (obj) { 63 var file = obj.that.files[0]; 64 var URL = window.URL || window.webkitURL; 65 var blob = URL.createObjectURL(file); 66 var base64; 67 68 var img = new Image(); 69 img.src = blob; 70 71 if(!/image\/\w+/.test(obj.that.files[0].type)){ 72 $.toast("请上传图片!",1000); 73 return false; 74 } 75 76 img.onload = function() { 77 if(img.width < obj.limitWid){ 78 $.toast('图片宽度不得小于'+ obj.limitWid +'px',1000); 79 return false; 80 } 81 var that = this; 82 83 //生成比例 84 var w,scale,h = that.height; 85 if(obj.cutWid == ''){ 86 w = that.width; 87 }else{ 88 w = obj.cutWid; 89 } 90 scale = w / h; 91 h = w / scale; 92 93 //生成canvas 94 var canvas = document.createElement('canvas'); 95 var ctx = canvas.getContext('2d'); 96 $(canvas).attr({ 97 width: w, 98 height: h 99 });100 ctx.drawImage(that, 0, 0, w, h);101 102 // 生成base64103 base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);104 var result = {105 base64:base64106 };107 108 //成功后的回调109 obj.success(result);110 };111 };
本文网址:http://www.shaoqun.com/a/233713.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
JS
0