Bootstrap fileinput 插件整合，完美实现各文件上传，删除。
fileinput 这个插件，实用美观 ，总的来说就是好使，但是在配置整合上，一般都会耗时间。这里我专门花了两天时间做了个整理，
下载的官网最新版 V5.0 调试成功这里记录一波；
分享给大家，有爱自取，同时做个记录！
基本支持所有类型的文件，不只图片，也可以扩展做导入，这里就不描述了。
上代码：
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content=""/>
<title>图片上传插件demotitle>
<link rel="stylesheet" href="/bootstrap4.1.3/css/bootstrap.css" crossorigin="anonymous">
<link href="/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="/fontawesome/css/all.css" crossorigin="anonymous">
<link href="/fileinput/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="/jquery-3.4.1.min.js" crossorigin="anonymous">script>
<script src="/bootstrap4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous">script>
<script src="/fileinput/js/plugins/piexif.js" type="text/javascript">script>
<script src="/fileinput/js/plugins/sortable.js" type="text/javascript">script>
<script src="/fileinput/js/fileinput.js" type="text/javascript">script>
<script src="/fileinput/themes/fas/theme.js" type="text/javascript">script>
<script src="/fileinput/themes/explorer-fas/theme.js" type="text/javascript">script>
<script src="/fileinput/js/locales/zh.js" type="text/javascript">script>
head>
<body>
<div>
<input id="file-1" name="files" type="file" class="file" multiple="multiple">
<input type="hidden" id="del_name" value="">
div>
<script src="/file-input.js" type="text/javascript">script>
body>
html>
**一个要注意，JS文件的引入顺序，语言配置一定放在最后！file-input.js放在最下方.
file-input.js
$("#file-1").fileinput({
language: 'zh',
theme: 'fas',
uploadUrl: '/pluginConfig/upload', // you must set a valid URL here else you will get an error
overwriteInitial: false,
textEncoding:'UTF-8',
//allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
//allowedFileTypes: ['image', 'video', 'flash'],
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount:10, //表示允许同时上传的最大文件个数
slugCallback: function (filename) {//不规则命名处理.
return filename.replace('(', '_').replace(']', '_');
}
});
//上传成功触发
$("#file-1").on("fileuploaded", function (event, data, previewId, index) {
//上传图片名称
var upload_img_name = previewId.substring(previewId.indexOf("_", index+1));
var url=$("#del_name").val();
if (url != null || url !=''){
$("#del_name").val(url+data.response.message+upload_img_name+';');
}
console.log('upload_img_name:'+upload_img_name)
});
//上传成功后，缩略删除图片，触发事件 data包含图片本来得 name
$('#file-1').on('filesuccessremove', function(event, key, data) {
console.log('event:'+event);
console.log('key:'+key);
console.log('data:'+data);
var index=data.indexOf("_");
//删除图片名称
var del_img_name = key.substring(key.indexOf("_", index));
console.log('del_img_name:'+del_img_name);
//当前上传的图片，拼接后字符串
var url=$("#del_name").val();
console.log("原始url:"+url);
var img_names = url.split(";");
var del_name;
for (var i = 0; i < img_names.length; i++) {
if(img_names[i].indexOf(del_img_name) >= 0){
del_name=img_names[i];
}
}
console.log("当前删除url:"+del_name);
url=url.replace(del_name+";","");
console.log("删除后url:"+url);
$.get("/pluginConfig/del",{"urls":del_name},function (data) {
if(data.code == 200){
$("#del_name").val(url);
}else {
console.log("code:"+data.code+",message:"+data.message);
}
})
});
//移除按钮触发事件
$('#file-1').on('filecleared', function() {
var testVal = $("#del_name").val();
var url=$("#del_name").val();
console.log(url);
if (testVal){
$.get("/pluginConfig/del",{"urls":url},function (data) {
if(data.code == 200){
$("#del_name").val('');
console.log("code:"+data.code+",message:"+data.message);
}else {
console.log("code:"+data.code+",message:"+data.message);
}
})
}
});
后台: 静态资源路径，我是在YML文件里指定的，可以在部署时，改动。
//静态资源路径
@Value("${web.upload-path}")
private String staticUrl;
//文件上传配置
@PostMapping("/upload")
public Result fileInput(@RequestParam("files")MultipartFile[] files){
String fileInput = FileUtil.uploadFiles(files, staticUrl, "fileInput");
return Result.ok(fileInput);
}
//文件删除配置
@GetMapping("/del")
public Result fileInputDel(String urls){
boolean b=true;
String[] split = urls.split(";");
for (int i = 0; i < split.length; i++) {
String url = split[i].substring(0, split[i].lastIndexOf(","));
b = FileUtil.deleteFile(staticUrl + url);
}
if (b){
return Result.ok("删除成功");
}else {
return Result.ok("删除失败");
}
}
/**
* 多文件上传
* @param files 文件集
* @param staticUrl 当前指定静态资源路径
* @param fileUrl 分类存储路径
* @return 数据存储路径，逗号拼接字符串
*/
public static String uploadFiles(MultipartFile files[],String staticUrl,String fileUrl){
//存储路径
String path="";
String dataBaseUrl="";
for (int i=0;i<files.length;i++){
//图片后缀
String fileSuffix = files[i].getOriginalFilename().substring(files[i].getOriginalFilename().lastIndexOf("."));
//图片全称
String fileName= DateUtil.NowDateYmd()+System.currentTimeMillis()+StringUtil.getUUID()+fileSuffix;
if (StringUtil.isEmpty(fileUrl)) {
path = staticUrl;
File file1 = new File(path);
if (!file1.exists()){
file1.mkdirs();
}
//数据库存储路径
dataBaseUrl=fileName+","+dataBaseUrl;
}else {
path = staticUrl+File.separator+fileUrl;
File file1 = new File(path);
if (!file1.exists()){
file1.mkdirs();
}
//数据库存储路径
dataBaseUrl="/"+fileUrl+"/"+fileName+","+dataBaseUrl;
}
File newFile = new File(path+File.separator+fileName);
logger.info("数据库存储路径:"+dataBaseUrl);
logger.info("上传路径:"+newFile);
try {
files[i].transferTo(newFile);
logger.info("上传成功");
}catch (IOException e){
e.printStackTrace();
logger.info("上传失败");
return null;
}
}
logger.info("数据库存储路径:"+dataBaseUrl);
return dataBaseUrl;
}
如下:
效果展示图：
静态资源百度云：
链接：https://pan.baidu.com/s/1JZSknHUNvuAD-wS66bu_EQ
提取码：spr8
复制这段内容后打开百度网盘手机App，操作更方便哦