花了三四天时间也就研究到这里，记录到这里。有新的有时间会继续记录在后续笔记中。从零到一，一点点学习。
新建一个HTML
<!DOCTYPE html>
<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(./img/1.jpg)"></li>
<li class="weui-uploader__file" style="background-image:url(./img/2.jpg)"></li>
<li class="weui-uploader__file" style="background-image:url(./img/3.jpg)"></li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./img/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(./img/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 class="weui-cell weui-cell_active">
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">视频上传</p>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles_videoList">
</ul>
<div class="weui-uploader__input-box">
<input id="uploaderFiles_video" class="weui-uploader__input" accept="video/*" multiple="" type="file">
</div>
</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 XXXX有限公司 版权所有 </p>
</div>
</div>
</div>
</div>
<div role="alert" id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</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();
uoloaderVideo();
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();
});
}
function uoloaderVideo() {
var $uploaderFiles_video = $("#uploaderFiles_video");
var $uploaderFiles_videoList = $("#uploaderFiles_videoList"); //图片列表
var tmpl = '<li class="weui-uploader__file"><video class="weui-uploader__file" src="#url#" controls="controls"></video></li>';
//上传视频的代码
$uploaderFiles_video.on('change', function(){
var files = this.files[0];
var fileReader = new FileReader(); //创建FileReader对象
fileReader.readAsDataURL(files); //将文件读取为Data URL
fileReader.onload = function(){
$uploaderFiles_videoList.append($(tmpl.replace('#url#', this.result)));
//$('#preview').attr('src', this.result); //更新预览视频的src属性
};
/* var file = this.files[0]; //获取选择的文件
var formData = new FormData(); //创建表单数据对象
formData.append('file', file); //将文件添加到表单数据中
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(data){
console.log(data); //成功返回后的处理
}
});*/
});
}
</script>
9505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
