生活随笔
收集整理的這篇文章主要介紹了
jQuery WeUI 上传
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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 上传的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
