当前位置：首页 > article >正文

bootstrap fileupload插件实现文件上传与前端回显图片

article 2025/8/23 8:33:36

页面集成 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: "<i class='glyphicon glyphicon-king'></i>",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 +=  '<img class="fileUrls" src="'+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代码

<!DOCTYPE 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>fileload</title><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: "<i class='glyphicon glyphicon-king'></i>",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 +=  '<img class="fileUrls" src="'+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 {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");}}

内置tomcat虚拟文件映射路径
访问项目外的文件需要配置如下：

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/image/**").addResourceLocations("file:C:/image/");}}

8.插件集成效果

在这里插入图片描述

参考资料：
岁月如歌，往事如风
SpringBoot 常用配置静态资源访问配置/内置tomcat虚拟文件映射路径 - 程序猿小码 - 博客园
Bootstrap FileInput中文API整理
SpringMVC + bootstrap fileupload 多文件上传
bootstrap fileupload 使用详解