上传图片（基于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 class="position_relative display-inlineBlock" style="float:left;">' +
 13                         '<img src="' + img_arr[len]  + '">' +
 14                         '<span class="icon deletedImages" 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 class="position_relative display-inlineBlock" style="float:left;">' +
 36                     '<img src="' + img_arr[i] + '">' +
 37                     '<span class="icon deletedImages" 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             // 生成base64
103             base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);
104             var result = {
105                 base64:base64
106             };
107 
108             //成功后的回调
109             obj.success(result);
110         };
111     };

 

转载于:https://www.cnblogs.com/zhangxusong/p/5603470.html