bootstrap fileinput文件上传
插件文件下载 https://github.com/kartik-v/bootstrap-fileinput/
中文官网： http://www.bootstrap-fileinput.com/options.html
1、只保留选择按钮，选择文件之后访问后端 即ajax上传
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>bootstrap文件上传插件</title>
<link href="../../../../resources/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../../../../resources/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="../../../../resources/css/theme.css" rel="stylesheet"/>
<link href="../../../../resources/css/bs4.pop.css" rel="stylesheet"/>
</head>
<body>
<div style="width: 100%;height: 700px;">
<!--multiple 表示支持多文件选择上传 class="file-loading" 使中文化； 默认 class="file" -->
<input type="file" name="file_upload" id="file_upload" multiple class="file-loading" />
</div>
<script src="/jquery-1.11.3.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/fileinput.js"></script>
<!--中文包支持-->
<script src="/zh.js"></script>
<script src="/theme.js"></script>
<script src="/bs4.pop.js" type="text/javascript"></script>
<script>
var fileUpload = $('#file_upload');
$(function () {
//初始化上传控件的样式
fileUpload.fileinput({
language: 'zh',//设置语言
theme: 'fas', //主题设置
uploadUrl: '/upload/uploadFile', //上传的地址
uploadAsync: false, //默认异步上传
allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif'], //设置上传的文件类型；文件后缀
maxFileCount: 10, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
//minFileCount: 0, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！", //超过最大文件数量提示信息
uploadExtraData: function () { //向服务器方法发送附加数据。
//后台通过 MultipartHttpServletRequest multipartRequest 接收
// String id = multipartRequest.getParameter("id");
// String name = multipartRequest.getParameter("name");
// Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
<!--
for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
MultipartFile mf = entity.getValue();
fileName = mf.getOriginalFilename();
InputStream inputStream = mf.getInputStream();
...
} -->
return {"id": "附加数据1", "name": "附加数据2"};
},
showUpload: false, //是否显示上传按钮 默认true 默认为一个表单提交按钮，除非指定了uploadUrl属性。
showRemove: false, //显示整体删除的按钮 默认true
showCaption: false,//是否显示文件名 默认为true
showPreview: false, //是否显示文件预览 默认true //四个都设置成false，则只显示一个‘选择’按钮
//文件选择器/浏览按钮的CSS类。默认为btn btn-primary 加了一个btn-mini 使‘选择’按钮变的小点
browseClass: "btn btn-mini btn-primary",
autoOrientImage: false,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",//当检测到用于预览的不可读文件类型时，
// 将在每个预览文件缩略图中显示的图标。默认为<i class="glyphicon glyphicon-file"></i>
overwriteInitial: false,
initialPreviewAsData: true,
// enctype: 'multipart/form-data',
dropZoneEnabled: false,//是否显示拖拽区域 默认是true
// dropZoneTitle: '可以将图片拖放到这里 …支持多文件上传', //显示拖拽区域时，显示的文字
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0, //单位为kb，如果为0表示不限制文件大小
// showCancel:true, //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
// layoutTemplates:{
// actionUpload:'',//去除上传预览缩略图中的上传图片
// actionZoom:'', //去除上传预览缩略图中的查看详情预览的缩略图标
// actionDownload:'', //去除上传预览缩略图中的下载图标
// actionDelete:'' //去除上传预览的缩略图中的删除图标
// }//对象用于渲染布局的每个部分的模板配置。您可以设置以下模板来控制窗口小部件布局.eg:去除上传图标
}).on("filebatchselected", function (event, files) { //点击 上传按钮时 或者选择上传的文件之后
var count = fileUpload.fileinput('getFilesCount'); //获取上传文件的数量
if (count > 0) {
// 进行文件上传
fileUpload.fileinput("upload");
} else {
alert("请选择要上传的文件");
}
}).on('filebatchuploadsuccess', function (event, data) { //上传后返回的响应
let obj = data.response; // 获取后台服务器传的数据
console.info(obj);
});
});
</script>
</body>
</html>
2、通过表单提交：
只保留选择文件预览的功能
$("#files").fileinput({ // <input type="file" id="files" class="file" name="files" multiple>
language: 'zh',//设置中文
allowedFileExtensions: ['jpg', 'jpeg', 'png', 'video'],
dropZoneTitle: '预览区',
layoutTemplates: {
actionUpload: '',//去除上传预览缩略图中的上传图片
actionZoom: '', //去除上传预览缩略图中的查看详情预览的缩略图标
actionDownload: '', //去除上传预览缩略图中的下载图标
actionDelete: '', //去除上传预览的缩略图中的删除图标
},
theme: 'fas',
showBrowse: true, //是否显示文件浏览按钮。
showPreview: true, // 是否显示文件预览
showCaption: false, // 是否显示文件名
showRemove: true, // 是否显示删除、清除按钮
showUpload: false, // 是否显示表单提交按钮
showCancel: false, // 是否显示文件上传取消按钮。默认值为true。只有在AJAX上传过程中，才会启用和显示。
showClose: false, //是否显示预览界面的关闭图标。默认为true。只有当showPreview为true或者在预览模板中使用{close}标签时才会被解析。
// autoOrientImage: false,
// browseClass: "btn btn-primary btn-lg",
// fileType: "any",
// previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
overwriteInitial: false, //重载初始预览
initialPreviewAsData: true,
maxFileCount: 3,
minFileCount: 1,
allowedFileTypes: ['image','video']
});
3、通过js ajax提交表单 未完善
使用 var formData = new FormData();
ajax中 data: formData
【 问题： 引用链接：https://www.jianshu.com/p/6d078b03ef8e
在使用 bootstrap fileinput.js时，需要限制上传文件的类型。发现有两个属性 allowedFileExtensions， allowedFileTypes。
allowedFileExtensions ：限制文件的后缀名
allowedFileTypes：限制文件的类型，两者所需的参数有所区别。
如：
allowedFileExtensions: ['jpg','png','bmp','jpeg'],
allowedFileTypes: ['image'],
如果同时初始化 allowedFileExtensions，allowedFileTypes，则 allowedFileExtensions的配置无效。
可根据需要初始化 allowedFileExtensions，allowedFileTypes二者之一即可，在使用 allowedFileTypes后，allowedFileExtensions将无效。
】
API链接参考：https://segmentfault.com/a/1190000018477200
