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

1. <!--图片上传-->
2. <divclass="weui-gallery"id="gallery">
3. <spanclass="weui-gallery__img"id="galleryImg"></span>
4. <divclass="weui-gallery__opr">
5. <ahref="javascript:"class="weui-gallery__del">
6. <iclass=></i>
7. </a>
8. </div>
9. </div>
10. <divclass=>
11. <divclass="weui-cell">
12. <divclass="weui-cell__bd">
13. <divclass="weui-uploader">
14. <divclass="weui-uploader__hd">
15. <pclass="weui-uploader__title">图片上传</p>
16. </div>
17. <divclass="weui-uploader__bd">
18. <ulclass="weui-uploader__files"id="uploaderFiles">
20. </ul>
21. <divclass="weui-uploader__input-box">
22. <inputid="uploaderInput"class=type="file"accept="image/*"multiple="">
23. </div>
24. </div>
25. </div>
26. </div>
27. </div>
28. </div>

JS部分：

[html]view plaincopy

1. <scripttype="text/javascript"src="../js/mui.min.js"></script>
2. <scripttype="text/javascript"src="../js/jquery.min.js"></script>
3. <scriptsrc="../js/jquery-weui.min.js"></script>
4. <script>
7. tmpl
8. gallery
9. galleryImg
10. uploaderInput
11. uploaderFiles
14. urlwindow
15. filese
16. i0lenfiles<len
17. filefiles
20. srcurl
22. srce
30. index
42. </script>

CSS和JS文件可以去官网下载

[html]view plaincopy

1. <linkrel="stylesheet"href="../css/mui.min.css">
2. <linkrel="stylesheet"href="../css/weui.min.css"/>
3. <linkrel="stylesheet"href="../css/jquery-weui.min.css"/>

[html]view plaincopy

1. <scripttype="text/javascript"src="../js/mui.min.js"></script>
2. <scripttype="text/javascript"src="../js/jquery.min.js"></script>
3. <scriptsrc="../js/jquery-weui.min.js"></script>

效果图：

点击加号，上传图片

点击图片，可以进行预览、删除

文章来源: jQuery WeUI 上传