Upload images based on zepto. js and zepto. js

Upload images based on zepto. js and zepto. js

The effect is as follows:

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 (); // related image $ (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; "> '+'  '+' <span class =" I Con deletedImages "sid =" '+ len +' "id =" other_img _ '+ len +' "> Videos </span> '+' </div> '; $ ('# showotherimage '). append (img); if (img_arr.length = 9) {$ ('# openIdCardImg '). hide (); return false ;}}); this. value = '';}); // deletes the image $ (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 <im G_arr.length; I ++) {var img = '<div class = "position_relative display-inlineBlock" style = "float: left; "> '+'  '+' <span class =" icon deletedImages "sid =" '+ I + '" id = "other_img _ '+ I +'"> audience </span> '+' </div> '; $ ('# showotherimage '). append (img);} if (img_arr.length <9) {$ ('# openIdCardImg '). show ();} else {$ ('# openIdCardImg '). hide () ;}});/** crop image ** $ (id ). resizeImage ({* that: This, // current image object * cutWid: '', // crop size * quality: 0.6, // image quality 0 ~ 1 * limitWid: 400, // minimum width * 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 ("upload an image! ", 1000); return false;} img. onload = function () {if (img. width <obj. limitWid) {$. toast ('image width cannot be less than '+ obj. limitWid + 'px ', 1000); return false;} var that = this; // generate the ratio var w, scale, h = that. height; if (obj. cutWid = '') {w = that. width;} else {w = obj. cutWid;} scale = w/h; h = w/scale; // generate canvas var canvas = document. createElement ('canvas '); var ctx = canvas. getContext ('2d '); $ (canvas ). attr ({width: w, height: h}); ctx. drawImage (that, 0, 0, w, h); // generate base64 base64 = canvas. toDataURL ('image/jpeg ', obj. quality | 0.8); var result = {base64: base64}; // callback obj after success. success (result );};};

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.