<!DOCTYPE html>
<!-- release v5.0.3, copyright 2014 - 2019 Kartik Visweswaran -->
<!--suppress JSUnresolvedLibraryURL -->
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Krajee JQuery Plugins - © Kartik</title>
<link rel="stylesheet" href="css/fileinput.css" />
<link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" >
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/fileinput.js"></script>
<script type="text/javascript" src="js/zh.js"></script>
</head>
<body>
<div class="container-fluid">
<form id="form" action="" method="post" enctype="multipart/form-data">
<div class="row form-group">
<div class="panel panel-primary">
<div class="panel-heading" align="center">
<label style="text-align: center;font-size: 18px;">文 件 上 傳</label>
</div>
<div class="panel-body">
<div class="col-sm-12">
<input id="input-id" name="file" multiple type="file" data-show-caption="true">
</div>
</div>
</div>
</div>
</form>
</div>
<script>
$(function () {
initFileInput("input-id");
})
function initFileInput(ctrlName) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //設置語言
uploadUrl: "upload/insert", //上傳的地址
allowedFileExtensions: ['jpg', 'gif', 'png','exe'],//接收的文件後綴
//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync: true, //默認異步上傳
showUpload: true, //是否顯示上傳按鈕
showRemove : true, //顯示移除按鈕
showPreview : true, //是否顯示預覽
showCaption: false,//是否顯示標題
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}！",
layoutTemplates :{
//actionDelete:'', //去除上傳預覽的縮略圖中的刪除圖標
//actionUpload:'',//去除上傳預覽縮略圖中的上傳圖片；
//actionZoom:'' //去除上傳預覽縮略圖中的查看詳情預覽的縮略圖標。
},
}).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) { //一個文件上傳成功
console.log('文件上傳成功！');
debugger
console.log('文件上傳成功！'+data.response.id);
}).on('fileerror', function(event, data, msg) { //一個文件上傳失敗
console.log('文件上傳失敗！'+data.id);
})
}
</script>
</body>
</html>
controller
/**
* 上傳文件
* @param request
* @param response
* @param file 上傳的文件，支持多文件
* @throws Exception
*/
@RequestMapping("/upload/insert")
@ResponseBody
public Object insert(HttpServletRequest request,HttpServletResponse response
,@RequestParam("file") MultipartFile[] file) throws Exception{
if(file!=null&&file.length>0){
//組合image名稱，“;隔開”
List<String> fileName =new ArrayList<String>();
try {
for (int i = 0; i < file.length; i++) {
if (!file[i].isEmpty()) {
fileName.add(file[i].getOriginalFilename());
//上傳文件，隨機名稱，";"分號隔開
// fileName.add(FileUtil.uploadImage(request, "/upload/"+TimeUtils.formateString(new Date(), "yyyy-MM-dd")+"/", file[i], true));
}
}
//上傳成功
if(fileName!=null&&fileName.size()>0){
System.out.println("上傳成功！");
System.out.println(response.toString()+fileName);;
}else {
System.out.println(response.toString()+ "上傳失敗！文件格式錯誤！");
}
} catch (Exception e) {
e.printStackTrace();
System.out.println(response.toString()+ "上傳出現異常！異常出現在：class.UploadController.insert()");
}
}else {
System.out.println(response.toString()+ "沒有檢測到文件！");
}
JSONObject object = new JSONObject();
object.put("id", 123);
return object;
}
如果點擊查看按鈕彈出的框被遮罩層擋住了，就需要設置css
<style type="text/css">
.modal-lg{
z-index: 10000;
}
</style>
