欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2016年06月21日 14:32:11   作者:木耳休心  
這篇文章主要介紹了基于zepto.js簡(jiǎn)單實(shí)現(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)前圖片對(duì)象
 * 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("請(qǐng)上傳圖片!",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);
 };
 };

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框

    JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • html中鼠標(biāo)滾輪事件onmousewheel的處理方法

    html中鼠標(biāo)滾輪事件onmousewheel的處理方法

    下面小編就為大家?guī)?lái)一篇html中鼠標(biāo)滾輪事件onmousewheel的處理方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-11-11
  • JS實(shí)現(xiàn)簡(jiǎn)易圖片自動(dòng)輪播

    JS實(shí)現(xiàn)簡(jiǎn)易圖片自動(dòng)輪播

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)易圖片自動(dòng)輪播,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • 解決FireFox下[使用event很麻煩]的問(wèn)題

    解決FireFox下[使用event很麻煩]的問(wèn)題

    解決FireFox下[使用event很麻煩]的問(wèn)題...
    2006-11-11
  • js中eval()函數(shù)和trim()去掉字符串左右空格應(yīng)用

    js中eval()函數(shù)和trim()去掉字符串左右空格應(yīng)用

    對(duì)于js中eval()函數(shù)的理解和寫(xiě)一個(gè)函數(shù)trim()去掉字符串左右空格;對(duì)于js中eval()函數(shù)的理解是本人心得不一定正確,感興趣的朋友參考下,或許對(duì)你學(xué)習(xí)eval()函數(shù)有所幫助
    2013-02-02
  • 微信小程序調(diào)用支付接口的完整流程記錄

    微信小程序調(diào)用支付接口的完整流程記錄

    我們?cè)谧鲂〕绦蛑Ц断嚓P(guān)的開(kāi)發(fā)時(shí),總會(huì)遇到這些難題,下面這篇文章主要給大家介紹了關(guān)于微信小程序調(diào)用支付接口的完整流程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-02-02
  • 如何在CocosCreator里畫(huà)個(gè)炫酷的雷達(dá)圖

    如何在CocosCreator里畫(huà)個(gè)炫酷的雷達(dá)圖

    這篇文章主要介紹了如何在CocosCreator里畫(huà)個(gè)炫酷的雷達(dá)圖,對(duì)Graphics感興趣的同學(xué),一定要看看,并且把代碼實(shí)踐一下
    2021-04-04
  • 詳解js對(duì)象中屬性的兩種類(lèi)型之?dāng)?shù)據(jù)屬性和訪問(wèn)器屬性

    詳解js對(duì)象中屬性的兩種類(lèi)型之?dāng)?shù)據(jù)屬性和訪問(wèn)器屬性

    在理解vue底層響應(yīng)式原理時(shí),了解到,原來(lái)對(duì)象中的屬性,不單單從表面看起來(lái)那么簡(jiǎn)單是key:value形式,而是還有隱藏的內(nèi)部特性,其中對(duì)象內(nèi)的屬性分為兩種類(lèi)型的屬性:數(shù)據(jù)屬性和訪問(wèn)器屬性,本文將給大家詳細(xì)介紹一下數(shù)據(jù)屬性和訪問(wèn)器屬性,需要的朋友可以參考下
    2023-05-05
  • JavaScript屬性操作

    JavaScript屬性操作

    這篇文章介紹了JavaScript屬性的操作,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-03-03
  • javascript+html5+css3自定義彈出窗口效果

    javascript+html5+css3自定義彈出窗口效果

    這篇文章主要為大家詳細(xì)介紹了javascript+html5+css3自定義彈出窗口效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-10-10

最新評(píng)論