国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 09:38:37
字體:
供稿:網(wǎng)友

效果如下:

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(); //相關(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+'"></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+ '"></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í)有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 芮城县| 大悟县| 双辽市| 巴林左旗| 三亚市| 虞城县| 中西区| 剑川县| 邯郸县| 高台县| 乌鲁木齐市| 威远县| 从江县| 雅江县| 资阳市| 东乡县| 邹城市| 蕉岭县| 饶河县| 合阳县| 兴义市| 长寿区| 松滋市| 六枝特区| 东山县| 克什克腾旗| 云浮市| 冕宁县| 耒阳市| 洮南市| 绍兴县| 安陆市| 滁州市| 分宜县| 杭州市| 南和县| 许昌县| 台江县| 蒲江县| 定日县| 拉萨市|