jquery-weui 圖片上傳功能實現(xiàn)，用Photo Browser圖片瀏覽器 組件預(yù)覽圖片
參考官方文檔
<!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;
**/*透明度導(dǎo)致底部內(nèi)容可見*/**
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("您的設(shè)備不支持圖片預(yù)覽功能，如需該功能請升級您的設(shè)備！");
}
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>');
}
})
//動態(tài)添加的元素綁定事件
$('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();
})
// 關(guān)閉圖片
$('.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
圖片不一樣，不用糾結(jié)。
默認不修改組件樣式的情況下，效果圖如下：
78E45530-5C99-45af-8179-001739ED8DC4.png
由于opacity的緣故，預(yù)覽圖片時可以看到表單輸入框的邊框，設(shè)置z-index為相對較大的值，就看不到下面的表單了
效果如下：
0A3356E8-3814-498a-A42F-559D857C80A2.png
希望本文能幫到有需要的人。如果喜歡，點贊哦。您的支持，是我繼續(xù)前行的動力。
