没有废话直接上代码
1、新建HTML5，样式自行百度下载
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>八月皇帝</title>
<!-- 引入 WeUI CDN 链接 -->
<link rel="stylesheet" href="./plugin/weui-2.6.4/dist/style/weui.min.css"/>
<link rel="stylesheet" href="./css/weui.css"/>
<link rel="stylesheet" href="./css/weuix.css"/>
<style>
</style>
</head>
<body ontouchstart>
<div class="page-bd-15">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">XXXX问题反馈表</h2>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">个人基本信息</div>
<div class="weui-cells">
<label for="js_input1" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">微信号</span></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" placeholder="填写本人微信号" />
</div>
</label>
<label for="js_input2" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">昵称</span></div>
<div class="weui-cell__bd">
<input id="js_input2" class="weui-input" placeholder="填写本人微信号的昵称"/>
</div>
</label>
<label for="js_input3" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">联系方式</span></div>
<div class="weui-cell__bd">
<input id="js_input3" class="weui-input" placeholder="请填写联系方式" type="number" pattern="[0-9]*" />
</div>
</label>
<div class="weui-cells weui-cells_form">
<div class="weui-cells__title" style="margin-top: 8px">问题描述</div>
<div class="weui-cell weui-cell_active">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请描述你的问题" rows="3" maxlength="200"></textarea>
<div role="option" aria-live="polite" class="weui-textarea-counter"><span>0</span>/200</div>
</div>
</div>
</div>
<div class="weui-cell weui-cell_active">
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">图片上传及预览</p>
<div class="weui-uploader__info"><span class="imgSum"></span>/8</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
<li class="weui-uploader__file" style="background-image:url(./images/1.jpg)"></li>
<li class="weui-uploader__file" style="background-image:url(./images/2.jpg)"></li>
<li class="weui-uploader__file" style="background-image:url(./images/3.jpg)"></li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/1.jpg)">
<div class="weui-uploader__file-content">
<i class="weui-icon-warn"></i>
</div>
</li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/2.jpg)">
<div class="weui-uploader__file-content">50%</div>
</li>
</ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" accept="image/*" multiple="" type="file">
</div>
</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-delete weui-icon_gallery-delete"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__opr-area">
<a role="button" disabled aria-disabled="true" class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:">确定</a>
</div>
<div class="weui-form__extra-area">
<div class="weui-footer">
<p class="weui-footer__links">
<a href="./pay.html" class="weui-footer__link">XXXX门户网站</a>
</p>
<p class="weui-footer__text">Copyright © 2023 XXXXXXX有限公司 版权所有 </p>
</div>
</div>
</div>
</div>
</div>
<!--页面切换-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"> </script>
<script src="./js/zepto.min.js"></script>
<script src="./js/zepto.weui.js"></script>
<script src="./js/lrz.min.js"></script>
<script src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.18/weui.min.js"></script>
<script src="js/common.js"></script>
<script src="js/main.js"></script>
</body>
</html>js实现部分
<script>
$(function(){
uploaderImg();
sumImgSize();
});
function sumImgSize() {
var length = document.getElementById("uploaderFiles").getElementsByTagName("li").length;
$('.imgSum').text(length);
}
function uploaderImg() {
var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>';
var $uploaderInput = $("#uploaderInput"); //上传按钮+
var $uploaderFiles = $("#uploaderFiles"); //图片列表
var $galleryImg = $(".weui-gallery__img");//相册图片地址
var $gallery = $(".weui-gallery");
$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)));
sumImgSize();
}
});
var index; //第几张图片
$uploaderFiles.on("click", "li", function(){
index = $(this).index();
$galleryImg.attr("style", this.getAttribute("style"));
console.log(this)
$gallery.fadeIn(100);
});
$gallery.on("click", function(){
$gallery.fadeOut(100);
});
//删除图片
$(".weui-gallery__del").click(function() {
$uploaderFiles.find("li").eq(index).remove();
});
}
</script>效果图
可以预览和删除
上传新的图片
