插件文件下載 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