生活随笔
收集整理的這篇文章主要介紹了
利用微信的weui框架上传、预览和删除图片
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
jQuery WeUI 是專(zhuān)為微信公眾賬號(hào)開(kāi)發(fā)而設(shè)計(jì)的一個(gè)框架，jQuery WeUI的官網(wǎng)：http://jqweui.com/
需求：需要在微信公眾號(hào)網(wǎng)頁(yè)添加上傳圖片功能
技術(shù)選型：實(shí)現(xiàn)上傳圖片功能可選百度的WebUploader、餓了么的Element和微信的jQuery WeUI，WebUploader的缺點(diǎn)是自定義UI困難，自定義上傳過(guò)程困難，Element的缺點(diǎn)是Web 控件，與手機(jī)端樣式不符，而jQuery WeUI專(zhuān)門(mén)為微信公眾號(hào)做的框架，基本不會(huì)出現(xiàn)問(wèn)題，使用起來(lái)比較簡(jiǎn)單。最后當(dāng)然就選微信的jQuery WeUI
HTML部分：
[html]?view plaincopy
??????????<div?class="weui-gallery"?id="gallery">??????????????<span?class="weui-gallery__img"?id="galleryImg"></span>??????????????<div?class="weui-gallery__opr">??????????????????<a?href="javascript:"?class="weui-gallery__del">??????????????????????<i?class="weui-icon-delete?weui-icon_gallery-delete"></i>??????????????????</a>??????????????</div>??????????</div>??????????<div?class="weui-cells?weui-cells_form">??????????????<div?class="weui-cell">??????????????????<div?class="weui-cell__bd">??????????????????????<div?class="weui-uploader">??????????????????????????<div?class="weui-uploader__hd">??????????????????????????????<p?class="weui-uploader__title">圖片上傳</p>??????????????????????????</div>??????????????????????????<div?class="weui-uploader__bd">??????????????????????????????<ul?class="weui-uploader__files"?id="uploaderFiles">????????????????????????????????????????????????????????????????</ul>??????????????????????????????<div?class="weui-uploader__input-box">??????????????????????????????????<input?id="uploaderInput"?class="weui-uploader__input?zjxfjs_file"?type="file"?accept="image/*"?multiple="">??????????????????????????????</div>??????????????????????????</div>??????????????????????</div>??????????????????</div>??????????????</div>??????????</div>??
JS部分：
[html]?view plaincopy
<script?type="text/javascript"?src="../js/mui.min.js"></script>??<script?type="text/javascript"?src="../js/jquery.min.js"></script>??<script?src="../js/jquery-weui.min.js"></script>??<script>??????mui.init();??????$(function()?{??????????var?tmpl?=?'<li?class="weui-uploader__file"?style="background-image:url(#url#)"></li>',??????????????$gallery?=?$("#gallery"),??????????????$galleryImg?=?$("#galleryImg"),??????????????$uploaderInput?=?$("#uploaderInput"),??????????????$uploaderFiles?=?$("#uploaderFiles");????????????????$uploaderInput.on("change",?function(e)?{??????????????????var?src,?url?=?window.URL?||?window.webkitURL?||?window.mozURL,??????????????????files?=?e.target.files;??????????????????for(var?i?=?0,?len?=?files.length;?i?<?len;?++i)?{??????????????????????var?file?=?files[i];????????????????????????if(url)?{??????????????????????????src?=?url.createObjectURL(file);??????????????????????}?else?{??????????????????????????src?=?e.target.result;??????????????????????}????????????????????????$uploaderFiles.append($(tmpl.replace('#url#',?src)));??????????????????}??????????????});??????????var?index;?//第幾張圖片??????????$uploaderFiles.on("click",?"li",?function()?{??????????????index?=?$(this).index();??????????????$galleryImg.attr("style",?this.getAttribute("style"));??????????????$gallery.fadeIn(100);??????????});??????????$gallery.on("click",?function()?{??????????????$gallery.fadeOut(100);??????????});??????????//刪除圖片??????????$(".weui-gallery__del").click(function()?{??????????????$uploaderFiles.find("li").eq(index).remove();??????????});??????});??</script>??
CSS和JS文件可以去官網(wǎng)下載
[html]?view plaincopy
<link?rel="stylesheet"?href="../css/mui.min.css">??<link?rel="stylesheet"?href="../css/weui.min.css"/>??<link?rel="stylesheet"?href="../css/jquery-weui.min.css"/>??
[html]?view plaincopy
?<script?type="text/javascript"?src="../js/mui.min.js"></script>???<script?type="text/javascript"?src="../js/jquery.min.js"></script>???<script?src="../js/jquery-weui.min.js"></script>??
效果圖：
點(diǎn)擊加號(hào)，上傳圖片
點(diǎn)擊圖片，可以進(jìn)行預(yù)覽、刪除
總結(jié)
以上是生活随笔為你收集整理的利用微信的weui框架上传、预览和删除图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
