Layui 新增表单demo 音频+图片

最新推荐文章于 2025-09-24 14:09:17 发布

原创

最新推荐文章于 2025-09-24 14:09:17 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Layui #资源上传

本文详细介绍了一个包含图片上传功能的复杂网页表单的设计与实现，涵盖了表单元素的布局、样式设定、输入验证以及使用LayUI和jQuery进行图片上传的交互逻辑。

样式

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>....</title>
	<link rel="stylesheet" rev="stylesheet" href="http://www.qubaobei.com/badmin/city/style/style.css?v=4" type="text/css" />
	<link rel="stylesheet" href="//www.qubaobei.com/kadmin/zlmm/static/admin/lib/layui/css/layui.css" id="layui">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>添加新期数</legend></fieldset>
<div style="margin-top: 20px;">
	<form class="layui-form" action="" method="post">
		<div class="layui-form-item">
			<div class="layui-inline" >
				<label class="layui-form-label">期数</label>
				<div class="layui-input-inline" style="width: 100px">
					<input lay-verify="required|number" name="act_num" id="act_num" placeholder="请输入期数" autocomplete="off" class="layui-input" style="width: 100px">
				</div>
			</div>		
		</div>
		<div class="layui-form-item">
			<div class="layui-inline" >
				<label class="layui-form-label">帖子ID</label>
				<div class="layui-input-inline" style="width: 100px">
					<input lay-verify="required|number" name="post_id" id="post_id" placeholder="请输入id" autocomplete="off" class="layui-input" style="width: 100px">
				</div>
				<div class="layui-input-inline">
					<input type="text" id="post_title" placeholder="自动匹配" readonly="readonly" autocomplete="off" class="layui-input" style="width: 390px">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline" >
				<label class="layui-form-label">顶部标题</label>
				<div class="layui-input-inline">
					<input type="text" lay-verify="required" name="title" placeholder="活动页顶部标题" autocomplete="off" class="layui-input" style="width: 500px">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline" >
				<label class="layui-form-label">分享文案</label>
				<div class="layui-input-inline">
					<input type="text" lay-verify="required" name="share_txt" placeholder="分享文案" autocomplete="off" class="layui-input" style="width: 500px">