layui多图，多音频，多视频，多文件上传

最新推荐文章于 2024-07-22 11:34:18 发布
最新推荐文章于 2024-07-22 11:34:18 发布
阅读量3.3k 收藏 12
点赞数 4
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guojiao1006/article/details/106012893
版权
该博客展示了如何使用 layui 框架实现多图、多音频、多视频及多文件的上传功能，包括jsp页面设计和上传实现方法。
摘要由CSDN通过智能技术生成

 示例图：

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"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
	<base href="<%=basePath%>">
	<!-- 下拉框 -->
	<link rel="stylesheet" href="static/ace/css/chosen.css" />
	<!-- jsp文件头和头部 -->
	<%@ include file="../../system/index/top.jsp"%>
	<!-- 日期框 -->
	<link rel="stylesheet" href="static/ace/css/datepicker.css" />
	<link rel="stylesheet" href="static/layui/css/layui.css" />
	<style type="text/css">
		.layui-upload-list {
			position: relative;
			display: flex;
			flex-wrap: wrap;
		}
		.layui-upload-list div{
			position: relative;
		}
		.layui-upload-list div .delete{
			position: absolute;
			top: 0px;
			right: 10px;
			width: 20px;
			height: 20px;
			border-radius: 100%;
			background-color: #FFF;
			color: red;
			font-weight: bold;
		}
		.layui-upload-img {
			width: 92px;
			height: 92px;
			margin: 0px 10px 0px 10px;
		}
		.layui-upload-audio {
			width: 300px;
			height: 50px;
			margin: 0px 10px 0px 10px;
		}
		.layui-upload-video {
			width: 300px;
			height: auto;
			margin: 0px 10px 0px 10px;
		}
	</style>
	</head>
<body class="no-skin">
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
	<!-- /section:basics/sidebar -->
	<div class="main-content">
		<div class="main-content-inner">
			<div class="page-content">
				<div class="row">
					<div class="col-xs-12">
					
					<form action="info/${msg }.do" name="Form" id="Form" method="post">
						<input type="hidden" name="INFO_ID" id="INFO_ID" value="${pd.INFO_ID}"/>
						<div id="zhongxin" style="padding-top: 13px;">

						<table id="table_report" class="table table-striped table-bordered table-hover">
							<tr>
								<td style="width:75px;text-align: right;padding-top: 13px;">图片:</td>
								<td>
									<div class="layui-upload">
										<button type="button" class="layui-btn" id="uploadPics">上传图片</button><span style="color:red">&nbsp;&nbsp;&nbsp;*仅上传图片格式：jpg,jpeg,png,bmp,gif</span>
										<div class="layui-upload-list" id="demo1"></div>
									</div>
									<input type="hidden" name="PICTURES" id="PICTURES" value="${pd.PICTURES}" style="width:98%;margin-top: 10px"/>
									<input type="hidden" name="THUMBNAILS" id="THUMBNAILS" value="${pd.THUMBNAILS}"  style="width:98%;"/>
								</td>
							</tr>
							<tr>
								<td style="width:75px;text-align: right;padding-top: 13px;">音频:</td>
								<td>
									<div class="layui-upload">
										<button type="button" class="layui-btn" id="uploadAudios">上传音频</button><span style="color:red">&nbsp;&nbsp;&nbsp;*仅上传音频格式：wav,mp3,ogg,webm</span>
										<div class="layui-upload-list" id="demo2"></div>
									</div>
									<input type="hidden" name="AUDIOS" id="AUDIOS" value="${pd.AUDIOS}" style="width:98%;margin-top: 10px"/>
								</td>
							</tr>
							<tr>
								<td style="width:75px;text-align: right;padding-top: 13px;">视频:</td>
								<td>
									<div class="layui-upload">
										<button type="button" class="layui-btn" id="uploadVideos">上传视频</button><span style="color:red">&nbsp;&nbsp;&nbsp;*仅上传视频格式：mp4,webm,ogg</span>
										<div class="layui-upload-list" id="demo3"></div>
									</div>
									<input type="hidden" name="VIDEOS" id="VIDEOS" value="${pd.VIDEOS}" style="width:98%;margin-top: 10px"/>
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input type="hidden" name="APPENDIXS" id="APPENDIXS" value="${pd.APPENDIXS}" style="width:98%;margin-top: 10px"/>
									<div class="layui-upload" style="margin-bottom:25px">
			                          <button type="button" class="layui-btn" id="uploadFiles">上传文件</button><span style="color:red">&nbsp;&nbsp;&nbsp;*仅上传文件格式：pdf</span>
			                          <div class="layui-upload-list">
			                            <table class="layui-table">
			                              <thead>
			                                <tr>
				                                <th>文件名</th>
				                                <th>状态</th>
				                                <th style="width:240px">操作</th>
			                              	</tr>
			                              </thead>
			                              <tbody id="demo4">
			                              </tbody>
			                            </table>
			                          </div>
			                        </div>
								</td>
							</tr>
							<tr>
								<td style="text-align: center;" colspan="10">
									<a class="btn btn-mini btn-primary" onclick="save();">保存</a>
									<a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
								</td>
							</tr>
						</table>
						</div>
						<div id="zhongxin2
最低0.47元/天 解锁文章
爱吃榴莲酥的姑娘
关注
专栏目录
Layui图片上、视频、音频、文件上传接口及跨域上传
06-20
Layui图片上、视频、音频、文件上传接口及跨域上传，此项目案例包含了多种上传方式，欢迎大家下载
php结合layui上传音频,layui中的视频上传（PHP ）
weixin_42445886的博客
03-12 608
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+thymeleaf+jquery实现多图片，多视频的上传、预览、放大、编辑功能
最新发布
joan_yb的博客
07-22 365
layui+thymeleaf+jquery实现多图片，多视频的上传、预览、放大、编辑功能
海豚php上传音频方法（引用 layui的 js 与 css）
soulmybaby的博客
06-04 704
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...
php获取layui上传视频,php layui实现前端多图上传实例
weixin_33379371的博客
03-10 413
php结合layui前端实现多图上传前端html代码请选择图片文件名图片预览大小状态操作开始上传js 代码layui.use('upload', function() {var $ = layui.jquery,upload = layui.upload;//多文件列表示例var demoListView = $('#demoList'),uploadListIns = upload.render...
Layui 新增表单demo 音频+图片
阿……莫西林杀菌室
05-18 1953
样式 代码： <!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="stylesh.
基于layui社区模板编辑器，增加视频音频上传功能发布
BaoLongWang的博客
09-15 1万+
此功能 展示 请查看 http://fly.layui.com/jie/8077.html  具体实现代码如下： 1、查找官方 demo/res/mods/index.js  超找代码 代码 下面插入 +'视频' +'音频'   查找代码 ,yulan: function(editor){ //预览 上面添加以下代码； ,video: functio
实现各种类型文件的多文件上传
06-23
在IT行业中，文件上传是Web应用中常见的功能之一，尤其在大数据时代，用户可能需要上传各种类型的文件，如文档、图片、音频、视频等。在本项目中，我们利用layui前端框架与SpringBoot后端技术栈，实现了多文件上传的...
layui实现文件压缩上传_基于SSM框架、Layui的多文件上传、包括图片，压缩包，音频等文件（与数据库挂钩） - 爱秧博客...
weixin_33584549的博客
01-12 616
写在前面：当初为了实现一个多文件上传可是费了一番功夫，经过我日日夜夜的百度咨询，写了好几种方法，最终还是没能解决问题。我可以很负责任的告诉你，你去百度上不管你形容有多好，只要是涉及多文件，就会查到MultipartFile[] file这个玩意，我也写过了。单文件上传确实只要写MultipartFile file就可以了，那多文件是不是就要涉及到数组呢？我可以告诉你的是，你很幸运的看到了这篇文章。...
thinkphp6/8 - 使用 layui 实现图片上传、视频大文件上传功能效果，在tp+Layui项目中如何完成上传图像并预览、完成mp4/mav视频上传并监听进度且可点击播放预览（代码一键复制
高级前端工程师
01-17 2255
thinkphp，tp，layui，图片上传，thinkphp+layui图片视频上传，tp+layui视频上传，tp图片图像上传教程，thinkphp5怎么加layui实现图片上传功能，thinkphp+layui上传多图，tp框架+Layui实现图片/文件上传功能分析，thinkphp结合layui上传视频，php获取layui上传视频,tp5+layui实现上传大文件，Tp 结合layui 上传，tp5加layui实现图片上传功能(带图片预览)，tp5和layui前端图像、视频上传，layui中的视频
layui手机录制视频上传ajax提交html手机只录视频上传不能选择文件视频流播放html video视频播放Tomcat报错
12-09
layui手机录制视频上传ajax提交，html手机只录视频上传不能选择文件，java获取视频流播放视频，html video视频播放Tomcat报错解决 说明： 用于现场录制视频，不能选择文件上传 这里的压缩包是使用layui和java实现方式，除了手机上传录制的视频是使用layui，其他都是java单独处理的
LayUI上传视频
qq_39072819的博客
01-19 2651
前端代码： @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edg
layui上传视频
weixin_41692437的博客
07-02 8150
找到layui上传视频的,整理一下 上传完之后是这样的 html代码 <div class="layui-form-item" style="width:200%;"> <label class="layui-form-label">商品视频</label> <div> <video controls='controls' style="margin-top: 10px;max-width: 4
layui富文本编辑器layedit增加上传视频与音频功能
qq_38529889的博客
11-22 9297
改动效果： layui2.4.3并没有视频、音频等上传功能，不过还好，目前有一个基于layui2.4.3的layedit扩展,增加了视频上传、字体颜色等等。 首先去下载一个layedit扩展文件：中转站 根据说明替换layedit.js，直接调用就会出现上面的效果，注意，编辑器中点击html会出错，那是因为少引入了一个ace,js，需要扩展文件中的Content/ace/ace.js，把Cont...
layui中的视频上传（PHP ）
叶落无痕的博客
11-16 1068
1.html中： <div class="layui-form-item"> <label class="layui-form-label">视频：</label> <div class="layui-input-inline"> 　　　　　<!--存放上传后视频路径--> <input type="text" name="video" id="inputvideourl" placeholder="
layui 弹框播放视频
热门推荐
zhangjuan1108的博客
05-18 1万+
var loadstr = '<video width="100%" height="100%" controls="controls" autobuffer="autobuffer" autoplay="autoplay" loop="loop"><source src="../Image/QQ%e8%a7%86%e9%a2%91201905151...
layui视频上传，文件上传前条件验证，视频大小，视频时长判断
zhang123csdn的博客
11-17 965
layui视频上传，文件上传前条件验证，视频大小，视频时长判断
layui 单图上传、多图上传、上传视频
qq_19591849的博客
02-03 1871
layui 单图上传、多图上传、上传视频
layui多图片上传
09-08
layui多图片上传是通过引用layui框架中的upload模块实现的。在页面中，可以使用upload.render方法创建多个图片上传控件，并配置相应的参数，如elem（上传按钮的选择器）、multiple（是否支持多文件上传）、accept（接受的文件类型）、size（文件大小限制）等。当用户选择文件后，可以通过choose回调函数获取选中的文件对象，并对其进行处理，例如预览图片、添加到FormData对象等。最后，在后台可以通过MultipartHttpServletRequest对象获取上传的文件，并进行相应的处理。为了区分不同的上传文件，可以在文件名中添加后缀或使用其他方式进行标识。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [layui 多图片上传](https://blog.csdn.net/weixin_42955679/article/details/132475173)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值