添加图片与弹出效果对比：
HTML:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
<!--医首信息自定义css-->
<link rel="stylesheet" type="text/css" href="../css/jiaj.css" rel="external nofollow" />
<!--官网demo css-->
<link rel="stylesheet" type="text/css" href="../css/example.css" rel="external nofollow" />
<!--weui css-->
<link rel="stylesheet" type="text/css" href="../css/weui.css" rel="external nofollow" />
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" rel="external nofollow" />
<!--jQuery weui-->
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css" rel="external nofollow" >
<title>回答问题</title>
</head>
<body ontouchstart>
<!--页面切换必须要添加js_container-->
<div class="container js_container">
<!--图片放大容器 style的透明度一定是0.8-->
<div class="weui-gallery" id="gallery" style="opacity: 0.8; display: none;">
<span class="weui-gallery__img" id="galleryImg" style="background-image:url(../img/doctor/55.jpg)"></span>
<div class="weui-gallery__opr">
<a href="javascript:" rel="external nofollow" class="weui-gallery__del">
<i class="weui-icon-delete weui-icon_gallery-delete"></i>
</a>
</div>
</div>
<div class="page">
<!--问题图片-->
<div class="weui-cells__title">上传3张图片，让患者更加容易理解</div>
<div class="weui-jiaj-panel">
<!--上传图片-->
<div class="weui-cell">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles"></ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
</div>
</div>
</div>
</div>
</div>
</div>
<!--button-->
<div class="weui-jiaj-bd">
<div class="weui-jiaj-btn-tixian">
<div id="d_answer" class="weui-btn weui-btn_primary">回答</div>
</div>
</div>
</div>
</div>
<!--页面切换-->
<script src="https://res.wx.qq.com/open/libs/zepto/1.1.6/zepto.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js"></script>
</body></html>
JS:
$(function() {
var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles"); $uploaderInput.on("change", function(e) {
var src, url = window.URL || window.webkitURL || window.mozURL,
files = e.target.files;
for(var i = 0, len = files.length; i < len; ++i) {
var file = files[i]; if(url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
} $uploaderFiles.append($(tmpl.replace('#url#', src)));
}
});
$uploaderFiles.on("click", "li", function() {
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
});
$gallery.on("click", function() {
$gallery.fadeOut(100);
});
});
