jquery-weui表单上传图片、预览功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传图片</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="assets/css/jquery-weui.css">
<link rel="stylesheet" href="assets/css/weui.css">
<link rel="stylesheet" href="assets/css/style.css"/>
</head>
<body>
<div class="g-container">
<div class="m-content">
<div class="weui-cells weui-cells_form weui-cells-custom">
<div class="weui-cell weui-cell_select weui-cell_select-before" style="height: 35px;padding: 5px 0">
<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>');
}
})
//动态添加的元素绑定事件
$(document).on('click','.j-close',function(){
$(this).parents('li').remove();
});
$(document).on('click','.img-wraper',function(){
// var pb=$.photoBrowser({
// items: [$(this).attr("src")]
// })
// pb.open()
$('.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>
