上传图片（基于zepto.js）

效果如下：

     <div class="otherPic">
                             <div id="showOtherImage"></div>
                             <span class="pull-left position_relative" id="openIdCardImg">
                                 <span class="icon color-blue addPic"></span>
                                 <input type="file" class="yy_inputFile" id="other_inputFile" name="reasonImg" />
                             </span>
                         </div>

html

 .basicInfo .item{ padding:.5rem .5rem 0; border-top:.3rem solid #eeeeee;}
 .basicInfo li{ overflow:hidden; margin-bottom:.5rem;line-height:2.1rem; border-bottom:1px solid #e3e3e3;}
 .basicInfo li:last-child{ border-bottom:none;}
 .basicInfo input[type="text"]{ height:2rem; line-height:2rem;}
 .basicInfo textarea{ height:8rem; line-height:1.5rem;}
 .basicInfo .otherPic{ min-height:3rem;}
 .basicInfo .otherPic .addPic{ height:3rem; line-height:3rem; font-size:3rem; margin-bottom:.5rem;}
 .basicInfo .otherPic img{ margin:0 .5rem .5rem 0; width:3rem; height:3rem; vertical-align:top; border:1px solid #ddd;}
 .basicInfo .yy_inputFile{ position:absolute; top:; left:; width:3rem; height:3rem; opacity:;}
 .basicInfo .aboutPic{ margin-bottom:.5rem; line-height:1.5rem; }

js:

     var img_arr = new Array();
         //相关图片
         $(page).on('change','#other_inputFile',function () {
             $(this).resizeImage({
                 that:this,
                 cutWid:'',
                 quality:0.6,
                 limitWid:710,
                 success:function (data) {
                     var len = $('#showOtherImage').find('img').size();
                     img_arr[len] = data.base64;
                     var img = '<div class="position_relative display-inlineBlock" style="float:left;">' +
                         '<img src="' + img_arr[len]  + '">' +
                         '<span class="icon deletedImages" sid="' +len+ '" id="other_img_'+len+'"></span>'+
                         '</div>';
                     $('#showOtherImage').append(img);
                     if(img_arr.length == 9){
                         $('#openIdCardImg').hide();
                         return false;
                     }
                 }
             });
             this.value = '';
         });

         //删除相关图片
         $(page).on('click','.deletedImages',function () {
             var sid = $(this).attr('sid');

             img_arr.splice(sid,1);
             $(this).parent().remove();

             $('#showOtherImage').html('');
             for( var i=0; i < img_arr.length; i++) {
                 var img = '<div class="position_relative display-inlineBlock" style="float:left;">' +
                     '<img src="' + img_arr[i] + '">' +
                     '<span class="icon deletedImages" sid="' +i+ '" id="other_img_' +i+ '"></span>'+
                     '</div>';
                 $('#showOtherImage').append(img);
             }

             if(img_arr.length < 9){
                 $('#openIdCardImg').show();
             }else{
                 $('#openIdCardImg').hide();
             }
         });

 /*
     * 裁剪图片
     * $(id).resizeImage({
      *  that:this,    //当前图片对象
      *  cutWid:'',    //裁剪尺寸
      *  quality:0.6,    //图片质量0~1
      *  limitWid:400,   //最小宽度
      *  success:function (data) {
      *      do something...
      *  }
     * })
     *
     * */
     $.fn.resizeImage = function (obj) {
         var file = obj.that.files[0];
         var URL = window.URL || window.webkitURL;
         var blob = URL.createObjectURL(file);
         var base64;

         var img = new Image();
         img.src = blob;

         if(!/image\/\w+/.test(obj.that.files[0].type)){
             $.toast("请上传图片！",1000);
             return false;
         }

         img.onload = function() {
             if(img.width < obj.limitWid){
                 $.toast('图片宽度不得小于'+ obj.limitWid +'px',1000);
                 return false;
             }
             var that = this;

             //生成比例
             var w,scale,h = that.height;
             if(obj.cutWid == ''){
                 w =  that.width;
             }else{
                 w = obj.cutWid;
             }
             scale = w / h;
             h = w / scale;

             //生成canvas
             var canvas = document.createElement('canvas');
             var ctx = canvas.getContext('2d');
             $(canvas).attr({
                 width: w,
                 height: h
             });
             ctx.drawImage(that, 0, 0, w, h);

             // 生成base64
             base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);
             var result = {
                 base64:base64
             };

             //成功后的回调
             obj.success(result);
         };
     };