基于zepto.js簡單實現(xiàn)上傳圖片

更新時間：2016年06月21日 14:32:11 作者：木耳休心

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

效果如下：

html:

<div class="otherPic">
    <div id="showOtherImage"></div>
    <span class="pull-left position_relative" id="openIdCardImg">
    <span class="icon color-blue addPic">&#xe647;</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();
 //相關(guān)圖片
 $(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+'">&#xe645;</span>'+
   '</div>';
   $('#showOtherImage').append(img);
   if(img_arr.length == 9){
   $('#openIdCardImg').hide();
   return false;
   }
  }
  });
  this.value = '';
 });

 //刪除相關(guān)圖片
 $(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+ '">&#xe645;</span>'+
   '</div>';
  $('#showOtherImage').append(img);
  }

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

/*
 * 裁剪圖片
 * $(id).resizeImage({
 * that:this, //當(dāng)前圖片對象
 * 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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: