java+js上传图片_[Java教程]上传图片（基于zepto.js）

[Java教程]上传图片(基于zepto.js)

0 2016-06-21 15:00:06

效果如下：

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 ' ' + 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 ' ' + 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