jquery-weui 图片上传功能实现，用gallery组件预览图片
官方文档地址
下面是做项目过程中实现的代码，把demo记录下来,避免以后重复造轮子。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="assets/css/jquery-weui.css">
<link rel="stylesheet" href="assets/css/weui.css">
<style>
//重写gallery样式
.weui-gallery__opr .weui-icon-cancel{
color: #fff;
font-size: 50px
}
// 删除图片按钮
.close {
display: inline-block;
position: absolute;
top: 2px;
right: 2px;
/*12*/
width: 20px;
height: 20px;
background: url('images/close.png') 0 0 no-repeat;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
cursor: pointer;
}
li {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
margin-left: 7px;
cursor: pointer;
vertical-align: middle;
}
// 上传图片的图标
.add-file {
overflow: hidden;
background: url('images/add.png') 0 0 no-repeat;
-webkit-background-size: 50px 50px;
background-size: 50px 50px;
}
input {
display: block;
width: 100%;
height: 100%;
opacity: 0;
}
//上传的图片列表
.m-upload-list {
overflow: hidden;
text-align: right;
font-size: 0;
}
img {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="g-container">
<div class="m-content">
<div class="weui-cells weui-cells_form weui-cells-custom">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="" class="weui-label">行驶证照片</label></div>
<div class="weui-cell__bd">
<ul class="m-upload-list">
<li class="add-file"><input type="file" class="j-upload"></li>
</ul>
</div>
</div>
<div class="weui-gallery" style="display: none">
<span class="weui-gallery__img"></span>
<div class="weui-gallery__opr">
<a href="javascript:" class="weui-gallery__del">
<i class="weui-icon-cancel"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery-2.1.4.js"></script>
<script src="assets/js/jquery-weui.js"></script>
<script>
$('.j-upload').change(function(){
var _this=this;
//判断是否支持FileReader
var reader=null;
if (window.FileReader) {
reader = new FileReader();
} else {
alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
}
var file = this.files[0];
reader.readAsDataURL(file);
//获取图片
result=this.result;
reader.onload = function(e){
$(_this).parents('ul').prepend('<li><img src="'+this.result+'" alt="" class="img-wraper"><i class="close j-close"></i></li>');
}
})
//动态添加的元素绑定事件
$('body').on('click','.j-close',function(){
$(this).parents('li').remove();
});
//预览图片
$('body').on('click','.img-wraper',function(){
$('.weui-gallery').css('display','block');
$('.weui-gallery__img').css("background-image",'url('+$(this).attr("src")+')');
})
// 关闭图片
$('.weui-gallery__del').on('click','',function(){
$('.weui-gallery').css('display','none');
})
</script>
</body>
</html>
下面是表单上传和图片预览效果图：
14EEC56D-FFFC-45aa-801C-CE360586D9C0.png
939061BE-1CCF-4624-ABB3-DD8166BDBB2E.png
