基于zepto.js簡(jiǎn)單實(shí)現(xiàn)上傳圖片
效果如下:
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)前圖片對(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í)有所幫助,也希望大家多多支持腳本之家。
- 淺談移動(dòng)端之js touch事件 手勢(shì)滑動(dòng)事件
- 移動(dòng)端js觸摸事件詳解
- touch.js 拖動(dòng)、縮放、旋轉(zhuǎn) (鼠標(biāo)手勢(shì))功能代碼
- 基于touch.js手勢(shì)庫(kù)+zepto.js插件開(kāi)發(fā)圖片查看器(滑動(dòng)、縮放、雙擊縮放)
- 移動(dòng)端腳本框架Hammer.js
- Hammer.js+輪播原理實(shí)現(xiàn)簡(jiǎn)潔的滑屏功能
- zepto.js中tap事件阻止冒泡的實(shí)現(xiàn)方法
- 基于zepto.js實(shí)現(xiàn)仿手機(jī)QQ空間的大圖查看組件ImageView.js詳解
- jQuery插件zepto.js簡(jiǎn)單實(shí)現(xiàn)tab切換
- js移動(dòng)端事件基礎(chǔ)及常用事件庫(kù)詳解
相關(guān)文章
JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07html中鼠標(biāo)滾輪事件onmousewheel的處理方法
下面小編就為大家?guī)?lái)一篇html中鼠標(biāo)滾輪事件onmousewheel的處理方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11JS實(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)題...2006-11-11js中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如何在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)器屬性
在理解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-05javascript+html5+css3自定義彈出窗口效果
這篇文章主要為大家詳細(xì)介紹了javascript+html5+css3自定義彈出窗口效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10