bootstrap fileupload插件实现文件上传与前端回显图片
页面集成 bootstrap fileupload
- 1.下载插件依赖
- 2.插件引入
- 3.构造fileupload控件
- 4.初始化控件
- 5.完整html代码
- 6.java文件处理
- 7.spring boot 配置虚拟路径映射
- 8.插件集成效果
Hi,I’am EverdayForCode. Had you learnt today!
1.下载插件依赖
bootstrap_fileupload插件依赖bootstrap，在引入插件的同时也需要引入bootstrap。
bootstrap：点击下载
bootstrap_fileupload:点击下载
2.插件引入
<link href="../../static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../../static/lib/btsp-fileinput/css/fileinput.min.css" rel="stylesheet" type="text/css" />
<link href="../../static/lib/btsp-fileinput/css/fileinput-rtl.min.css" rel="stylesheet" type="text/css" />
<script src="../../static/js/jquery-3.1.1.min.js">script>
<script type="text/javascript" src="../../static/lib/bootstrap/js/bootstrap.min.js">script>
<script type="text/javascript" src="../../static/lib/btsp-fileinput/js/fileinput.min.js">script>
<script type="text/javascript" src="../../static/lib/btsp-fileinput/js/locales/zh.js">script>
值得注意的是： fileupload也依赖jQuery，在引入fileupload前应该先引入jQuery。
3.构造fileupload控件
<div class="pic_display">
div>
<div class="container-fluid">
<form id="form" action="upload/insert" method="post" enctype="multipart/form-data">
<div class="row form-group">
<label class="col-md-4">图片上传:label>
<div class="col-sm-12">
<input id="input-id" name="file" multiple type="file" data-show-caption="true">
div>
div>
form>
div>
4.初始化控件
<script type="text/javascript">
function initFileInput(ctrlName) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
uploadUrl: "http://resource.natapp1.cc/upload_file", //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png','mp4'],//接收的文件后缀
//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync: false, //默认异步上传
showUpload: true, //是否显示上传按钮
showRemove : true, //显示移除按钮
showPreview : true, //是否显示预览
showCaption: true,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: true,//是否显示拖拽区域
minImageWidth: 50, //图片的最小宽度
minImageHeight: 50,//图片的最小高度
maxImageWidth: 1000,//图片的最大宽度
maxImageHeight: 1000,//图片的最大高度
maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
minFileCount: 0,
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
window:true,
uploadExtraData: function(previewId, index) { //额外参数的关键点,没有额外参数可以注释掉
data = {
uId:uId
}
return data;
}
}).on('filepreupload', function(event, data, previewId, index) { //一个上传中处理函数
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
console.log('文件正在上传');
}).on("fileuploaded", function (event, data, previewId, index) { //一个文件完成处理函数
//后端下载数据成功后返回前端文件路径，前端解析路径进行文件回显（图片可使用img标签，视频可以使用视频播放插件，这里演示的是图片回显）
var htmlStr = ''
htmlStr += '
+data.response.data+'" alt="">';
$(".pic_display").append(htmlStr);
console.log('文件上传成功+++++！'+data);
}).on('fileerror', function(event, data, msg) { //一个文件上传失败处理函数
console.log('文件上传失败！'+data.id);
})
}
$(function () {
initFileInput("input-id");
})
</script>
5.完整html代码
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="../../static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../../static/lib/btsp-fileinput/css/fileinput.min.css" rel="stylesheet" type="text/css" />
<link href="../../static/lib/btsp-fileinput/css/fileinput-rtl.min.css" rel="stylesheet" type="text/css" />
<script src="../../static/js/jquery-3.1.1.min.js">script>
<script type="text/javascript" src="../../static/lib/bootstrap/js/bootstrap.min.js">script>
<script type="text/javascript" src="../../static/lib/btsp-fileinput/js/fileinput.min.js">script>
<script type="text/javascript" src="../../static/lib/btsp-fileinput/js/locales/zh.js">script>
<title>fileloadtitle>
<style>
.pic_display img{
width: 100%;
}
style>
head>
<body>
<div>
<div class="pic_display">
div>
<div class="container-fluid">
<form id="form" action="http://resource.natapp1.cc/upload_file" method="post" enctype="multipart/form-data">
<div class="row form-group">
<label class="col-md-4">图片上传:label>
<div class="col-sm-12">
<input id="input-id" name="file" multiple type="file" data-show-caption="true">
div>
div>
form>
div>
div>
<script type="text/javascript">
function initFileInput(ctrlName) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
uploadUrl: "http://resource.natapp1.cc/upload_file", //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png','mp4'],//接收的文件后缀
//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync: false, //默认异步上传
showUpload: true, //是否显示上传按钮
showRemove : true, //显示移除按钮
showPreview : true, //是否显示预览
showCaption: true,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: true,//是否显示拖拽区域
minImageWidth: 50, //图片的最小宽度
minImageHeight: 50,//图片的最小高度
maxImageWidth: 1000,//图片的最大宽度
maxImageHeight: 1000,//图片的最大高度
maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
minFileCount: 0,
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
window:true,
uploadExtraData: function(previewId, index) { //额外参数的关键点,没有额外参数可以注释掉
data = {
//uId:uId
}
return data;
}
}).on('filepreupload', function(event, data, previewId, index) { //一个上传中处理函数
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
console.log('文件正在上传');
}).on("fileuploaded", function (event, data, previewId, index) { //一个文件完成处理函数
//后端下载数据成功后返回前端文件路径，前端解析路径进行文件回显（图片可使用img标签，视频可以使用视频播放插件，这里演示的是图片回显）
var htmlStr = ''
htmlStr += '+data.response.data+'" alt="">';
$(".pic_display").append(htmlStr);
console.log('文件上传成功+++++！'+data);
}).on('fileerror', function(event, data, msg) { //一个文件上传失败处理函数
console.log('文件上传失败！'+data.id);
})
}
$(function () {
initFileInput("input-id");
})
script>
body>
html>
6.java文件处理
public class FileUtil {
private static String filePath = "D:\\test";
public static Map<String,String> upload(MultipartFile file) {
Map<String,String> map = new HashMap<String ,String>();
//获取文件后缀名
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
log.info("后缀名" + suffix);
//随机生成上传文件名
String randomFileName = ""+ UUID.randomUUID();
String path = filePath + "\\" + randomFileName +suffix;
String fileName = randomFileName+suffix;
File dest = new File(path);
map.put("path",path);
map.put("fileName",fileName);
//上传文件
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
try {
file.transferTo(dest);
} catch (IOException e) {
e.printStackTrace();
}
return map;
}
}
对应的controller我就不在写了，核心是文件处理类
值得注意：
后端不能直接返回磁盘的真实路径，这样会被浏览器拦截导致无法访问资源。应该做一下磁盘路径的虚拟映射。
7.spring boot 配置虚拟路径映射
静态资源访问配置
@Configuration
@EnableWebMvc
public class StaticResourceConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}
}
内置tomcat虚拟文件映射路径
访问项目外的文件需要配置如下：
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/image/**").addResourceLocations("file:C:/image/");
}
}
8.插件集成效果
参考资料：
岁月如歌，往事如风
SpringBoot 常用配置 静态资源访问配置/内置tomcat虚拟文件映射路径 - 程序猿小码 - 博客园
Bootstrap FileInput中文API整理
SpringMVC + bootstrap fileupload 多文件上传
bootstrap fileupload 使用详解
写在后面：集成文件上传插件参考了许多大佬的博客，感谢以上大佬博文。