你的位置:首页 > Java教程

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


效果如下:

1   <div class="otherPic">2               <div id="showOtherImage"></div>3               <span class="pull-left position_relative" id="openIdCardImg">4                 <span class="icon color-blue addPic">&#xe647;</span>5                 <input type="file" class="yy_inputFile" id="other_inputFile" name="reasonImg" />6               </span>7             </div>

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 = '<div >' + 13             '<img src="' + img_arr[len] + '">' + 14             '<span sid="' +len+ '" id="other_img_'+len+'">&#xe645;</span>'+ 15             '</div>'; 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 = '<div >' + 36           '<img src="' + img_arr[i] + '">' + 37           '<span sid="' +i+ '" id="other_img_' +i+ '">&#xe645;</span>'+ 38           '</div>'; 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   };