這篇文章主要介紹了基于zepto.js簡單實現(xiàn)上傳圖片的相關資料,需要的朋友可以參考下

效果如下：

html: 

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

.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:0; left:0; width:3rem; height:3rem; opacity:0;}

.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, //圖片質(zhì)量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

  };

  //成功后的回調(diào)

  obj.success(result);

 };

 };

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助