Upload images (based on zepto. js) and zepto. js

Upload images (based on zepto. js) and zepto. js

The effect is as follows:

1 <div class = "otherPic"> 2 <div id = "showOtherImage"> </div> 3 <span class = "pull-left position_relative" id = "openIdCardImg"> 4 <span class = "icon color-blue addPic"> & # xe647; </span> 5 <input type = "file" class = "yy_inputFile" id = "other_inputFile" name = "reasonImg"/> 6 </span> 7 </div>Html

 1 .basicInfo .item{ padding:.5rem .5rem 0; border-top:.3rem solid #eeeeee;} 2 .basicInfo li{ overflow:hidden; margin-bottom:.5rem;line-height:2.1rem; border-bottom:1px solid #e3e3e3;} 3 .basicInfo li:last-child{ border-bottom:none;} 4 .basicInfo input[type="text"]{ height:2rem; line-height:2rem;} 5 .basicInfo textarea{ height:8rem; line-height:1.5rem;} 6 .basicInfo .otherPic{ min-height:3rem;} 7 .basicInfo .otherPic .addPic{ height:3rem; line-height:3rem; font-size:3rem; margin-bottom:.5rem;} 8 .basicInfo .otherPic img{ margin:0 .5rem .5rem 0; width:3rem; height:3rem; vertical-align:top; border:1px solid #ddd;} 9 .basicInfo .yy_inputFile{ position:absolute; top:0; left:0; width:3rem; height:3rem; opacity:0;}10 .basicInfo .aboutPic{ margin-bottom:.5rem; line-height:1.5rem; }

Js:

1 var img_arr = new Array (); 2 // related Image 3 $ (page ). on ('change', '# other_inputFile', function () {4 $ (this ). resizeImage ({5 that: this, 6 cutWid: '', 7 quality: 0.6, 8 limitWid: 710, 9 success: function (data) {10 var len = $ ('# showotherimage '). find ('img '). size (); 11 img_arr [len] = data. base64; 12 var img = '<div class = "position_relative display-inlineBlock"> 13' ' + 14' <spa N class = "icon deletedImages" sid = "'+ len +'" id = "other_img _ '+ len +'" >&# xe645; </span> '+ 15' </div>'; 16 $ ('# showotherimage '). append (img); 17 if (img_arr.length = 9) {18 $ ('# openIdCardImg '). hide (); 19 return false; 20} 21} 22}); 23 this. value = ''; 24}); 25 26 // Delete the image 27 $ (page ). on ('click ','. deletedImages ', function () {28 var sid = $ (this ). attr ('sid '); 29 30 img_arr.splice (sid, 1); 31 $ (this ). pa Rent (). remove (); 32 33 values ('{showotherimage'{.html (''); 34 for (var I = 0; I  36' ' + 37' <span class = "icon deletedImages" sid = "'+ I +'" id = "other_img _ '+ I +'" >&# xe645; </span> '+ 38' </div>'; 39 $ ('# showotherimage '). append (img); 40} 41 42 if (img_arr.length <9) {43 $ ('# openIdCardImg' ). Show (); 44} else {45 $ ('# openIdCardImg '). hide (); 46} 47}); 48 49/* 50 * crop image 51 * $ (id ). resizeImage ({52 * that: this, // current image object 53 * cutWid: '', // crop size 54 * quality: 0.6, // image quality 0 ~ 1 55 * limitWid: 400, // minimum width 56 * success: function (data) {57 * do something... 58 *} 59 *}) 60*61 **/62 $. fn. resizeImage = function (obj) {63 var file = obj. that. files [0]; 64 var URL = window. URL | window. webkitURL; 65 var blob = URL. createObjectURL (file); 66 var base64; 67 68 var img = new Image (); 69 img. src = blob; 70 71 if (! /Image \/\ w +/. test (obj. that. files [0]. type) {72 $. toast ("upload an image! ", 1000); 73 return false; 74} 75 76 img. onload = function () {77 if (img. width <obj. limitWid) {78 $. toast ('image width cannot be less than '+ obj. limitWid + 'px ', 1000); 79 return false; 80} 81 var that = this; 82 83 // generate a ratio of 84 var w, scale, h = that. height; 85 if (obj. cutWid = '') {86 w = that. width; 87} else {88 w = obj. cutWid; 89} 90 scale = w/h; 91 h = w/scale; 92 93 // generate canvas 94 var canvas = document. createElement ('canvas '); 95 var ctx = canvas. getContext ('2d '); 96 $ (canvas ). attr ({97 width: w, 98 height: h 99}); 100 ctx. drawImage (that, 0, 0, w, h); 101 102 // generate base64103 base64 = canvas. toDataURL ('image/jpeg ', obj. quality | 0.8); 104 var result = {105 base64: base64106}; 107 108 // callback 109 obj. success (result); 110}; 111 };