jquery-weui 图片上传功能实现，用Photo Browser图片浏览器 组件预览图片
参考官方文档
<!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>
.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%;
}
.weui-photo-browser-modal.weui-photo-browser-modal-visible {
opacity: 1;
**/*透明度导致底部内容可见*/**
z-index: 100;
}
</style>
</head>
<body>
<div class="g-container">
<div class="m-banner">
<img src="assets/images/banner.png" alt="link" />
</div>
<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>
</div>
</div>
<script src="assets/js/jquery-2.1.4.js"></script>
<script src="assets/js/jquery-weui.js"></script>
<script type='text/javascript' src='assets/js/swiper.js' charset='utf-8'></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(){
var pb = $.photoBrowser({
items: [
$(this).attr("src"),
$(this).attr("src"),
$(this).attr("src")
]
});
pb.open();
})
// 关闭图片
$('.weui-gallery__del').on('click','',function(){
$('.weui-gallery').css('display','none');
})
var outerHeight = $('.g-container').outerHeight(true);
var spaceHeight = $(document.body).outerHeight(true) - outerHeight;
// console.log(outerHeight,$(document.body).outerHeight(true),spaceHeight);
if(spaceHeight > 55){
$('.m-footer').addClass('f-pos');
$('.m-wrap').css('padding-bottom',spaceHeight + 10)
}
</script>
</body>
</html>
上传列表页面效果：
14EEC56D-FFFC-45aa-801C-CE360586D9C0.png
图片不一样，不用纠结。
默认不修改组件样式的情况下，效果图如下：
78E45530-5C99-45af-8179-001739ED8DC4.png
由于opacity的缘故，预览图片时可以看到表单输入框的边框，设置z-index为相对较大的值，就看不到下面的表单了
效果如下：
0A3356E8-3814-498a-A42F-559D857C80A2.png
希望本文能帮到有需要的人。如果喜欢，点赞哦。您的支持，是我继续前行的动力。
