mirror of
https://gitee.com/270580156/weiyu.git
synced 2026-05-17 20:57:51 +00:00
147 lines
7.2 KiB
HTML
147 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>萝卜丝-留言页面-公众号</title>
|
|
<link rel="stylesheet" href="./css/vendor/weui/weui.min.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page">
|
|
<div class="page__hd">
|
|
<h1 class="page__title">Uploader</h1>
|
|
<p id="x123" class="page__desc">
|
|
<input class="weui-hidden_abs" readonly style="width: 1px; height: 1px;" aria-labelledby="x123"
|
|
role="option">
|
|
上传组件，一般配合<a class="weui-wa-hotarea link" href="#gallery">组件Gallery</a>来使用。
|
|
</p>
|
|
</div>
|
|
<div class="page__bd">
|
|
<div role="dialog" aria-hidden="true" aria-modal="true" class="weui-gallery" id="gallery">
|
|
<span role="img" tabindex="0" class="weui-gallery__img" id="galleryImg"></span>
|
|
<div class="weui-gallery__opr">
|
|
<a role="button" aria-label="删除" href="javascript:" class="weui-gallery__del">
|
|
<i class="weui-icon-delete weui-icon_gallery-delete"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="weui-cells weui-cells_form">
|
|
<div class="weui-cell weui-cell_uploader">
|
|
<div class="weui-cell__bd">
|
|
<div class="weui-uploader">
|
|
<div class="weui-uploader__hd" role="option"
|
|
aria-labelledby="js_uploader_title js_a11y_comma js_uploader_current_num js_uploader_unit js_a11y_comma js_uploader_max_tips js_uploader_max_num js_uploader_unit">
|
|
<p id="js_uploader_title" class="weui-uploader__title">图片上传</p>
|
|
<div class="weui-uploader__info">
|
|
<span id="js_uploader_current_num">0</span>/<span id="js_uploader_max_num">2</span>
|
|
</div>
|
|
<div id="js_uploader_unit" class="weui-hidden_abs">张</div>
|
|
<div id="js_uploader_max_tips" class="weui-hidden_abs">可上传</div>
|
|
</div>
|
|
<div class="weui-uploader__bd">
|
|
<ul class="weui-uploader__files" id="uploaderFiles">
|
|
<li class="weui-uploader__file" role="img" aria-label="图片标题" title="轻点两下查看大图"
|
|
tabindex="0" style="background-image: url(./images/pic_160.png);"></li>
|
|
<li class="weui-uploader__file" role="img" aria-label="图片标题" title="轻点两下查看大图"
|
|
tabindex="0" style="background-image: url(./images/pic_160.png);"></li>
|
|
<li class="weui-uploader__file" role="img" aria-label="图片标题" title="轻点两下查看大图"
|
|
tabindex="0" style="background-image: url(./images/pic_160.png);"></li>
|
|
<li class="weui-uploader__file weui-uploader__file_status"
|
|
style="background-image: url(./images/pic_160.png);">
|
|
<div role="alert" class="weui-uploader__file-content">
|
|
<i role="img" tabindex="0" aria-label="错误" class="weui-icon-warn"></i>
|
|
</div>
|
|
</li>
|
|
<li class="weui-uploader__file weui-uploader__file_status"
|
|
style="background-image: url(./images/pic_160.png);">
|
|
<div role="alert" class="weui-uploader__file-content">50%</div>
|
|
</li>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
|
|
<script src="https://res.wx.qq.com/t/wx_fed/cdn_libs/res/weui/1.2.8/weui.min.js"></script>
|
|
<script type="text/javascript">
|
|
//WAH.default.init()
|
|
</script>
|
|
<script type="text/javascript">
|
|
function wxReady(callback) {
|
|
if (
|
|
typeof WeixinJSBridge === 'object' &&
|
|
typeof window.WeixinJSBridge.invoke === 'function'
|
|
) {
|
|
callback()
|
|
} else {
|
|
document.addEventListener('WeixinJSBridgeReady', callback, false)
|
|
}
|
|
}
|
|
wxReady(function () {
|
|
WeixinJSBridge.invoke('getUserConfig', {}, function (res) {
|
|
if (res.isCareMode) {
|
|
document.body.setAttribute('data-weui-mode', 'care');
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
var tmpl = '<li class="weui-uploader__file" role="img" tabindex="0" 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)));
|
|
}
|
|
});
|
|
var currentImg;
|
|
$uploaderFiles.on("click", "li", function () {
|
|
$galleryImg.attr("style", this.getAttribute("style"));
|
|
$gallery.attr('aria-hidden', 'false');
|
|
$gallery.attr('aria-modal', 'true');
|
|
$gallery.fadeIn(100);
|
|
setTimeout(function () {
|
|
$galleryImg.attr("tabindex", '-1').trigger('focus');
|
|
}, 200);
|
|
currentImg = this;
|
|
});
|
|
$gallery.on("click", function () {
|
|
$gallery.attr('aria-modal', 'false');
|
|
$gallery.attr('aria-hidden', 'true');
|
|
$gallery.fadeOut(100);
|
|
setTimeout(function () {
|
|
$galleryImg.removeAttr("tabindex");
|
|
}, 200);
|
|
currentImg.focus();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|