jquery-weui 圖片上傳功能實(shí)現(xiàn)与纽，用gallery組件預(yù)覽圖片
官方文檔地址
下面是做項(xiàng)目過程中實(shí)現(xiàn)的代碼，把demo記錄下來,避免以后重復(fù)造輪子。
<!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;
}
// 上傳圖片的圖標(biāo)
.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("您的設(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>');
}
})
//動(dòng)態(tài)添加的元素綁定事件
$('body').on('click','.j-close',function(){
$(this).parents('li').remove();
});
//預(yù)覽圖片
$('body').on('click','.img-wraper',function(){
$('.weui-gallery').css('display','block');
$('.weui-gallery__img').css("background-image",'url('+$(this).attr("src")+')');
})
// 關(guān)閉圖片
$('.weui-gallery__del').on('click','',function(){
$('.weui-gallery').css('display','none');
})
</script>
</body>
</html>
下面是表單上傳和圖片預(yù)覽效果圖：
14EEC56D-FFFC-45aa-801C-CE360586D9C0.png
939061BE-1CCF-4624-ABB3-DD8166BDBB2E.png
