jQuery WeUI 是專為微信公眾賬號開發而設計的一個框架，jQuery WeUI的官網：http://jqweui.com/
需求：需要在微信公眾號網頁添加上傳圖片功能
技術選型：實現上傳圖片功能可選百度的WebUploader、餓了么的Element和微信的jQuery WeUI，WebUploader的缺點是自定義UI困難，自定義上傳過程困難，Element的缺點是Web 控件，與手機端樣式不符，而jQuery WeUI專門為微信公眾號做的框架，基本不會出現問題，使用起來比較簡單。最后當然就選微信的jQuery WeUI
HTML部分：
- <!--圖片上傳-->??
- ????????<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部分：
- <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文件可以去官網下載
- <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"/>??
- ?<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>??
效果圖：
點擊加號，上傳圖片
點擊圖片，可以進行預覽、刪除
