jQuery WeUI 是專為微信公眾賬號開發而設計的一個框架，jQuery WeUI的官網：http://jqweui.com/

需求：需要在微信公眾號網頁添加上傳圖片功能

技術選型：實現上傳圖片功能可選百度的WebUploader、餓了么的Element和微信的jQuery WeUI，WebUploader的缺點是自定義UI困難，自定義上傳過程困難，Element的缺點是Web 控件，與手機端樣式不符，而jQuery WeUI專門為微信公眾號做的框架，基本不會出現問題，使用起來比較簡單。最后當然就選微信的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文件可以去官網下載

[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>??

效果圖：

點擊加號，上傳圖片

點擊圖片，可以進行預覽、刪除

總結

以上是生活随笔為你收集整理的jQuery WeUI 上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。