Layui 新增表单demo 音频+图片

最新推荐文章于 2023-05-10 20:35:40 发布
最新推荐文章于 2023-05-10 20:35:40 发布
阅读量1.8k 收藏 4
点赞数 1
分类专栏： # 前端框架 Layui 文章标签： Layui 资源上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_38854224/article/details/106191980
版权

样式 

代码：

<!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">
				</div>
			</div>
		</div>
<!-- 		<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" id="user_id" name="user_id" autocomplete="off" style="width: 100px" class="layui-input" value="" placeholder="user_id">
				</div>
				<div class="layui-input-inline">
					<input type="text" readonly="readonly" id="nickname" placeholder="自动匹配" class="layui-input" style="width: 150px" value="">
				</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="talk_title" placeholder="活动页话题栏标题" autocomplete="off" class="layui-input" style="width: 500px">
				</div>
			</div>
		</div> -->
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">本期简介</label>
			<div class="layui-input-block">
				<textarea lay-verify="required" name="description" placeholder="请输入内容" class="layui-textarea" style="width: 500px"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">背景图</label>
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="bg_pic_upload">图片上传</button> 
					<blockquote class="" style="margin-top: 5px;">
						<div class="layui-upload-list" id="bg_pic"></div>
					</blockquote>
				</div>
				<div class="layui-inline" style="display: none;">
					<label class="layui-form-label">背景图</label>
					<div class="layui-upload-list">
						<input type="text" id="bg_pic_url" lay-verify="verify_bg_pic" name="bg_pic_url" value="" class="layui-input">
					</div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">介绍图</label>
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="intro_pic_upload">图片上传</button> 
					<blockquote class="" style="margin-top: 5px;">
						<div class="layui-upload-list" id="intro_pic"></div>
					</blockquote>
				</div>
				<div class="layui-inline" style="display: none;">
					<label class="layui-form-label">介绍图</label>
					<div class="layui-upload-list">
						<input type="text" id="intro_pic_url" lay-verify="verify_intro_pic" name="intro_pic_url" value="" class="layui-input">
					</div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">分享图</label>
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="share_pic_upload">图片上传</button> 
					<blockquote class="" style="margin-top: 5px;">
						<div class="layui-upload-list" id="share_pic"></div>
					</blockquote>
				</div>
				<div class="layui-inline" style="display: none;">
					<label class="layui-form-label">分享图</label>
					<div class="layui-upload-list">
						<input type="text" id="share_pic_url" lay-verify="verify_share_pic" name="share_pic_url" value="" class="layui-input">
					</div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">轮播图</label>
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="car_pic_upload">图片上传</button> 
					<blockquote class="" style="margin-top: 5px;">
						<div class="layui-upload-list" id="car_pic"></div>
					</blockquote>
				</div>
				<div class="layui-inline" style="display: none;">
					<label class="layui-form-label">轮播图</label>
					<div class="layui-upload-list">
						<input type="text" id="car_pic_url" lay-verify="verify_car_pic" name="car_pic_url" value="" class="layui-input">
					</div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">音频文件</label>
			<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="mp3_upload">音频上传</button> 
	
				<div class="layui-inline" >
					<div class="layui-input-inline">
						<audio controls="controls" id="mp3Btn">
						</audio>
						<input type="text" lay-verify="verify_mp3" name="mp3_url" id="mp3_url" readonly="readonly" placeholder="音频地址" autocomplete="off" class="layui-input" style="width: 500px;display: none;">
					</div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
			  <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
			  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
</body>

<script src="layui/layui.js"></script>

<script>
  layui.use(['element','jquery','form','upload'], function () {
    var $ = layui.jquery,
		upload = layui.upload,
		form  = layui.form;
		var url = 'sub/yu.php';

		//bg_pic上传
		upload.render({
			elem: '#bg_pic_upload'
			,url: url+'?method=upload&type=images'
			,method: 'get'
			,acceptMime: 'image/*'
			,done: function(res,index){
				if(res.code){
					$('#bg_pic').append('<img src="'+ res.url +'" alt="" width="100" style="float:left;margin-right:5px;" onclick="previewImg(this)">')
					$('#bg_pic_url').val(res.url)
				}else{
					layer.msg(res.msg, {icon: 2}); 
				}
			}
		});
		//intro_pic上传
		upload.render({
			elem: '#intro_pic_upload'
			,url: url+'?method=upload&type=images'
			,method: 'get'
			,acceptMime: 'image/*'
			,done: function(res,index){
				if(res.code){
					$('#intro_pic').append('<img src="'+ res.url +'" alt="" width="100" style="float:left;margin-right:5px;" onclick="previewImg(this)">')
					$('#intro_pic_url').val(res.url)
				}else{
					layer.msg(res.msg, {icon: 2}); 
				}
			}
		});
		//share_pic上传
		upload.render({
			elem: '#share_pic_upload'
			,url: url+'?method=upload&type=images'
			,method: 'get'
			,acceptMime: 'image/*'
			,done: function(res,index){
				if(res.code){
					$('#share_pic').append('<img src="'+ res.url +'" alt="" width="100" style="float:left;margin-right:5px;" onclick="previewImg(this)">')
					$('#share_pic_url').val(res.url)
				}else{
					layer.msg(res.msg, {icon: 2}); 
				}
			}
		});
		//share_pic上传
		upload.render({
			elem: '#car_pic_upload'
			,url: url+'?method=upload&type=images'
			,method: 'get'
			,acceptMime: 'image/*'
			,done: function(res,index){
				if(res.code){
					$('#car_pic').append('<img src="'+ res.url +'" alt="" width="100" style="float:left;margin-right:5px;" onclick="previewImg(this)">')
					$('#car_pic_url').val(res.url)
				}else{
					layer.msg(res.msg, {icon: 2}); 
				}
			}
		});
		//音频上传
		upload.render({
			elem: '#mp3_upload'
			,url: url+'?method=upload&type=audio'
			,method: 'get'
			,accept: 'audio'
			,acceptMime: 'audio/mp3'
			,done: function(res,index){
				console.log(res);
				if(res.code){
					$('#mp3Btn').append('<source src="'+ res.url +'" type="audio/mpeg">')
					$('#mp3_url').val(res.url);
				}else{
					layer.msg(res.msg, {icon: 2}); 
				}
			}
		});
	//失去焦点事件
	$('#post_id').blur(function(){
		var post_id = $('#post_id').val();
		if(post_id){
			var data = {'method':'get_bbs_post_info','post_id':post_id};
			asynData(url,data,'post_title');
		}
	});

	$('#user_id').blur(function(){
		var user_id = $('#user_id').val();
		if(user_id){
			var data = {'method':'get_user_info','user_id':user_id};
			asynData(url,data,'nickname');
		}
	});	

	function asynData(url,data,t){
		$.post(
			url,
			data,
			function(data){
				if(data.ret == 1){
					if(t != 'nickname' && t != 'post_title'){
						t.val(data.msg);
					}else{
						$('#'+t).val(data.msg);
					}
				}else{
					var index = layer.alert(data.msg,{icon:2},function(){ layer.close(index);});
				}
			},'json');
	}
	form.verify({
		verify_intro_pic: function(value, item){ //value：表单的值、item：表单的DOM对象
			if(value==''){
				return '介绍图未上传';
			}
		},
		verify_bg_pic: function(value, item){ //value：表单的值、item：表单的DOM对象
			if(value==''){
				return '背景图未上传';
			}
		},
		verify_share_pic: function(value, item){ //value：表单的值、item：表单的DOM对象
			if(value==''){
				return '分享图未上传';
			}
		},
		verify_car_pic: function(value, item){ //value：表单的值、item：表单的DOM对象
			if(value==''){
				return '分享图未上传';
			}
		},
		verify_mp3: function(value, item){ //value：表单的值、item：表单的DOM对象
			if(value==''){
				return '音频资源未上传';
			}
		},		
	});     
	//监听提交
	form.on('submit(submit)', function(data){
		data.field.method = 'insert_act_yu';
		//var	da = JSON.stringify(data.field);
		var	da = data.field;
		submitR(da);
		return false;
	});
	function submitR(da){
		console.log(da);
		$.post(
			url,
			da,
			function(obj){
				console.log(obj);
				if(obj.ret == 1){
					var index = layer.msg('添加成功',{time: 1000},function(){
						layer.close(index);
						// 获得frame索引
						var p_index 	= parent.layer.getFrameIndex(window.name);
						parent.tableReload();
						parent.layer.close(p_index);
						});
				}else{
					var index = layer.alert(obj.msg,{icon:2},function(){ layer.close(index);});
				}
			},'json').error(function(ooo) { console.log(JSON.stringify(ooo)); });
	}
	//回复者id获取信息
	window.userData=function(th){
		var user_id = $(th).val();
		var reply_u = $(th).parent().next().children();
		if(user_id){
			var data = {'method':'get_user_info','user_id':user_id};
			asynData(url,data,reply_u);
		}
	}
});

</script>

 

阿……莫西林
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
语音提醒.rar
08-07
你有一条新的订单请及时处理 语音提醒音频，你有一条新的订单请及时处理 语音提醒音频
django layui表单加图片上传功能（Django，layui）.zip
06-26
layui图片上传功能，和表单同步上传或只上传表单，若看不懂，文件里有完整项目分享
基于layui自定义表单组件
03-28
主要用于C#开发，方便、快捷、效率高
使用layer弹窗和layui表单实现新增功能
10-18
最近做项目遇到这样的需求使用layer在弹窗内完成新增，成功后提示并刷新页面，下面小编给大家带来了使用layer弹窗和layui表单做新增功能，具体实现代码，参考下本
layui 图片上传+表单提交+ Spring MVC的实例
10-16
今天小编就为大家分享一篇layui 图片上传+表单提交+ Spring MVC的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于layui封装的网页音视播放器源码
03-16
基于layui封装的网页音视播放器源码
layui弹窗 实现图片、音频在线预览
Jifei5201314的博客
03-01 4317
一、layui组件下载地址 Layui镜像站-经典开源模块化前端 UI 框架(官方文档完整镜像) 二、实现 1.图片预览 function previewImages() { let parentObj = $(this).parents('[data-img="prveimgbox"]');//父元素 layer.photos({ photos: parentObj, closeBtn:1, anim: 5 }); } 2.视频
浏览器语音附加背景音乐
qq_34626688的博客
11-08 274
浏览器语音附加背景音乐 1.相关知识 video 和 window.SpeechSynthesisUtterance() 2.目录层级 3.代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浏览器语音附加背景音乐</title> &lt...
layui多图，多音频，多视频，多文件上传
爱吃榴莲酥的姑娘
05-09 3224
示例图： 1. jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> &l.
Layui图片上、视频、音频、文件上传接口及跨域上传
06-20
Layui图片上、视频、音频、文件上传接口及跨域上传，此项目案例包含了多种上传方式，欢迎大家下载
海豚php上传音频方法（引用 layui的 js 与 css）
soulmybaby的博客
06-04 676
1.html代码 <div class="layui-upload" > <div> <label class="col-xs-12" for="{$form[type].name}" style="margin-left: 13px;">{$form[type].title|htmlspecialchars}</label> &lt...
一个网页显示歌词的音乐播放器
qq_36370910的博客
05-10 578
这里需要用到layui的 layui.css 和 layui.js 文件 , 如果是用CDN地址的话, 进度条可能会有显示问题。下载的歌词需要图中这样格式, 有些会出现 [00:00:000] 或 [00:00:0000]首先你要下载歌词, 下载地址: https://www.kugeci.com/一般就开头或结尾有几个 删除多余的就行[00:00:00]其次到 网易云音乐网页版 找到对应音乐的ID,然后把找到的 ID 复制到歌词第一行就行了。最后点这个选择歌词文件, 点播放就行了。
录音及播放
yangxun0727l的博客
05-14 622
最近项目使用录音功能，特此记录下。以及指出小左遇到的问题。使用MediaRecorder（录音）、MediaPlayer（播放）、ExecutorService（线程池）实现功能。一：权限：&lt;uses-permission android:name="android.permission.RECORD_AUDIO" /&gt; &lt;uses-permission android:name...
php结合layui上传音频,layui中的视频上传（PHP ）
weixin_42445886的博客
03-12 563
1.html中：视频：上传视频2.js中：//上传视频upload.render({elem: ‘#upload_video‘,url: "上传接口",accept: ‘video‘ //视频,done: function(res){$("#inputvideourl").val(res.data.src);layer.msg(‘上传成功‘);}});3.上传接口：public function ...
用layui实现表单提交（包含图片）
qq_41294224的博客
03-29 5826
近段时间接触了layui,发现挺好用的，妈妈再也不用担心我的样式丑了~ 说回正题，做个学习帖，记录一下layui实现表单提交中包含头像上传的问题： 首先导入jquery(也可以用layui自带的)，再导入layui的css和js,注意你的逻辑js文件要在layui js的下面 html代码： <form id="myadd" class="layui-form layui-form-pane...
layui上传表单包含图片
qq_40787608的博客
04-04 1315
HTML代码 <form class="layui-form layui-form-pane" action="" enctype="multipart/form-data" onsubmit="return false;"> <div class="layui-form-item"> <label class="layui-form-label">标题</label&g
php获取layui上传视频,php layui实现前端多图上传实例
weixin_33379371的博客
03-10 385
php结合layui前端实现多图上传前端html代码请选择图片文件名图片预览大小状态操作开始上传js 代码layui.use('upload', function() {var $ = layui.jquery,upload = layui.upload;//多文件列表示例var demoListView = $('#demoList'),uploadListIns = upload.render...
layui多功能上传文件（视频，图片，pdf）
qq_39951524的博客
07-14 3295
layui多功能上传文件（视频，图片，pdf） 1.前端页面html代码展示 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>产品信息文件</legend> </fieldset> <div class="layui-form-item" id="videoUp1"> &lt
layui +.netcore mvc +orcale
最新发布
07-03
### 回答1： Layui是一款基于HTML5和CSS3技术开发的前端UI框架，它提供了丰富的UI组件和独特的模块化开发方式，使得前端开发更加简单和高效。Layui可以与.NET Core MVC框架无缝集成，实现前后端分离的开发模式。通过Layui，开发者可以快速构建出美观、交互丰富的网页应用。 .NET Core是由Microsoft开发的开源跨平台框架，借助它，开发者可以在Windows、Linux和macOS等多个操作系统上构建高性能的Web应用程序。使用.NET Core MVC框架可以方便地开发和管理网站的使用逻辑，与Layui相结合，可以实现前后端分离的开发模式，提高开发效率和项目可维护性。 Oracle是一种关系型数据库管理系统，具有高性能、高可靠性和强大的功能。在.NET Core MVC项目中使用Oracle数据库可以提供可靠的数据存储和管理能力。通过Oracle提供的ADO.NET驱动程序，可以方便地与.NET Core应用程序进行集成，并进行数据的读取和写入。 综上所述，结合Layui、.NET Core MVC和Oracle可以构建出一个强大的Web应用程序。Layui提供了美观且易于使用的前端组件，.NET Core MVC框架提供了稳定且高性能的开发环境，而Oracle数据库提供了可靠的数据存储和管理能力。这样的组合可以使开发者更加便捷地开发出功能齐全且用户体验良好的Web应用程序。 ### 回答2： Layui是一款基于HTML、CSS、JavaScript的前端UI框架，它提供了一套简洁易用的界面组件，能够快速搭建美观的用户界面。对于使用Layui的.NET Core MVC项目来说，可以通过在前端页面中引入Layui的CSS和JavaScript文件来使用其提供的各种组件，比如表格、表单、弹窗等，从而实现丰富的用户交互和界面展示效果。 .NET Core是微软开发的跨平台开发框架，能够支持在Windows、Linux、Mac等操作系统上运行。它的MVC框架是一种基于模型-视图-控制器的设计模式，能够将前端页面、后端业务逻辑以及数据访问分离开来，提升代码的可维护性和扩展性。在.NET Core MVC项目中，可以很方便地通过使用C#编写控制器和模型来处理业务逻辑，并将结果通过视图呈现给用户。 Oracle是一家知名的数据库管理系统提供商，它提供了强大的关系型数据库服务。在.NET Core MVC项目中使用Oracle数据库时，可以通过使用Oracle提供的.NET数据访问技术（如ODP.NET）来实现与数据库的连接和操作。借助于.NET Core MVC的数据访问技术，可以在控制器中编写代码进行数据的增删改查操作，并将结果返回给前端页面展示给用户。 综上所述，Layui、.NET Core MVC和Oracle可以很好地结合在一起，实现一个功能强大、界面美观、数据安全可靠的Web应用。通过前端的Layui框架，可以搭建出优雅的用户界面；通过.NET Core MVC框架，可以实现清晰的分层架构和灵活的业务逻辑；通过Oracle数据库，可以实现数据的持久化和高效的数据管理。这样的组合能够满足开发者和用户对于功能、性能和用户体验的要求。 ### 回答3： layui是一款基于HTML5和CSS3的前端UI框架，提供了丰富的组件和模块化的开发方式，可以快速搭建漂亮、易用的网页界面。它的特点是简洁、轻量、易学易用，适用于各种Web应用的开发。 .NET Core是微软推出的开源跨平台开发框架，它可以在Windows、Linux和Mac等多种操作系统上运行，具有高性能、可扩展性好等特点。使用.NET Core可以方便地开发各种Web应用、移动应用和云服务等。 Oracle是一家全球著名的数据库解决方案提供商，其数据库产品具有高度可靠性、安全性和可扩展性。在开发Web应用时，通过使用Oracle数据库可以实现数据的持久化和高效的数据访问操作。 综上所述，当我们使用Layui、.NET Core MVC和Oracle进行开发时，我们可以通过Layui提供的丰富的UI组件和模块化开发方式来设计网页界面，使用.NET Core MVC来开发Web应用的后端逻辑，并通过Oracle数据库实现数据的持久化和访问操作。这样的组合可以使开发过程更加高效、简便，同时满足用户对于良好界面和可靠数据存储的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值