首页 / 脚本样式 / JavaScript / 基于zepto.js简单实现上传图片

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

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;//生成canvasvar canvas = document.createElement（"canvas"）;var ctx = canvas.getContext（"2d"）;$（canvas）.attr（{width: w,height: h}）;ctx.drawImage（that, 0, 0, w, h）;// 生成base64base64 = canvas.toDataURL（"image/jpeg", obj.quality || 0.8）;var result = {base64:base64};//成功后的回调obj.success（result）; }; };