springboot集成Stream上传插件+图片缩略图+视频缩略图

最新推荐文章于 2024-07-30 23:06:02 发布

iceSnowChen

最新推荐文章于 2024-07-30 23:06:02 发布

阅读量4.3k

点赞数

分类专栏： java 文章标签：上传、缩略图

本文链接：https://blog.csdn.net/a632202838/article/details/80675384

版权

最近项目需要做上传功能，网上搜索了一下各种的上传插件，最后选择了stream插件，stream支持暂停上传、进度展示、批量上传等核心功能，样式也可以自定义，可以集成bootstrap或layui等框架，比较符合预期。在demo中，我也集成了图片缩略图的生成，视频缩略图的截取等功能，有兴趣的可以看一下

Stream插件：http://twinkling.cn/

首先围观一下

是不是感觉不错，至少我认为是可以的，因为项目本身用的是layui，Stream官网的自定义样式例子用的是bootstrap，我也懒得改了，直接又把bootstrap加入到项目中，有兴趣有时间的同学可以用layui的样式改造一下。

首先说，该控件虽然可以选择多文件同时上传，但文件之间的上传还是串行的，即只允许同时上传一个文件，下面贴出核心的代码，完整的例子详情请在demo中查看

前端代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>上传插件集成</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/layui-2.3.0/css/layui.css" media="all" />
	<link href="/streamUpload/css/stream-v1.css" rel="stylesheet" type="text/css">
	<link href="/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="childrenBody" style="width: 95%">
	<div class="layui-upload" style="margin-left: 15px;margin-top: 15px;width: 100%">
	  <button type="button" class="layui-btn layui-btn-normal margin-left" id="uploadFileList">选择多文件</button>
	  <div class="layui-upload-list" style="width: 100%">
	    <div class="container" style="width: 100%;min-width: 550px;">
			<div class="row clearfix">
				<div class="col-md-7 column" style="width: 80%;overflow: auto;max-height: 400px;">
					<table id="data_table" class="layui-table" lay-skin="line" style="width: 100%;min-width: 500px;">
						<thead>
							<tr>
								<th>文件名</th>
								<th style="width: 40%">进度</th>
								<th style="min-width: 60px">大小</th>
								<th style="min-width: 70px">操作</th>
							</tr>
						</thead>
						<tbody id="bootstrap-stream-container">
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="container" style="width: 100%">
			<div class="row clearfix" style="width: 100%">
				<div class="col-md-7 column" style="width: 80%">
					<table style="margin-top: 10px;width: 100%" id="stream_total_progress_bar">
						<tr>
							<th style="min-width: 500px;">
								<div class="progress">
								  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
								  </div>
								</div>
							</th>
						</tr>
						<tr>
							<th>
								<span class="stream_total_size"></span>
								<span class="stream_total_percent"></span>
							</th>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div class="margin