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 上传相关推荐

jQuery异步上传文件
jQuery异步上传文件我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="fil ...
jquery文件上传插件|进度条
jquery文件上传插件|进度条一.Uploadify 官网:http://www.uploadify.com/ 下载地址:http://down.51cto.com/data/577863 详细参 ...
jQuery 文件上传插件：uploadify、swfupload
jQuery 文件上传插件: uploadify.swfupload
10个强大的Ajax jQuery文件上传程序
上传文件和图片是许多网站的一个常用功能,无论是让注册用户上传一个个人资料图片还是上传文件共享,都离不开上传程序,虽然有很多种实现方法,但要让上传看起来更酷一点,如显示剩余时间,同时上传多个文件,以及使 ...
如何使用 jQuery 异步上传文件？
问: 我想用 jQuery 异步上传文件. $(document).ready(function () { $("#uploadbutton").click(function () ...
jquery formdata上传文件示例
jquery formdata上传文件示例 var formData=new FormData();formData.append("faceType", $(this).data ...
关于使用jQuery前端上传文件
关于使用jQuery前端上传文件我们都知道 html中file类型的input可以直接读取本地的文件; 如果使用form表单的话,那么action = url 这就会上传完文件会刷新页面,返回值就会 ...
angular文件上传php,ajax jquery angular 上传文件与分隔上传
简单总结下 #ajax上传文件 var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", "2.php" ...
flask ajax 上传图片,flask jQuery ajax 上传文件
1.html 代码注:1.html 部分主要是一个form表单,其中表单的enctype = "multipart/form-data" 必须要有. 2.由于我的页面背景颜色设置 ...

jQuery WeUI 上传

jQuery WeUI 上传相关推荐

最新文章

热门文章