Bootstrap FileInput中文API整理：https://blog.csdn.net/u012526194/article/details/69937741
SpringMVC + bootstrap fileupload 多文件上傳：https://blog.csdn.net/fanxiangru999/article/details/61927385
bootstrap fileupload 使用詳解：https://blog.csdn.net/fanxiangru999/article/details/63756730
源碼以及API地址：
bootstrap-fileinput源碼：https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在線API：http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo
前后端單文件上傳代碼：
@ResponseBody @RequestMapping(value="/upload", method = RequestMethod.POST) public JSONObject upload(@RequestParam("file") MultipartFile file, HttpServletRequest request ) { System.out.println("上傳開始"); JSONObject json = new JSONObject(); json.put("code", "1"); if( file.isEmpty() ) { json.put("msg", "上傳文件為空"); return json; }else { String savePath = request.getServletContext().getRealPath("/upload/"); String fileName=file.getOriginalFilename(); String pathname = savePath + fileName; File dest = new File(pathname); if( !dest.getParentFile().exists() ) { dest.getParentFile().mkdirs(); } try { file.transferTo(dest); json.put("code", 1); json.put("msg", "上傳成功"); json.put("imgPath", pathname); return json; } catch (Exception e) { json.put("msg", e.getMessage()); return json; } } }
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran --> <html lang="en"> <head> <meta charset="UTF-8"/> <title>上傳文件測試</title> <link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet"> <link href="<%=basePath%>css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> <script src="<%=basePath%>js/jquery-3.2.1.min.js"></script> <script src="<%=basePath%>js/fileinput.min.js" type="text/javascript"></script> <script src="<%=basePath%>js/fileinput_locale_zh.js" type="text/javascript"></script> <script src="<%=basePath%>js/bootstrap.min.js" type="text/javascript"></script> </head> <body> <div class="container"> <div class="row" style="height: 500px"> <input id="file-0" class="file" type="file" multiple data-min-file-count="1" name="file"> </div> </div> <script type="text/javascript"> //初始化fileinput控件（第一次初始化） function initFileInput(ctrlName, uploadUrl) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh', //設置語言 uploadUrl: uploadUrl, //上傳的地址 allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后綴 showUpload: true, //是否顯示上傳按鈕 showCaption: false,//是否顯示標題 browseClass: "btn btn-primary", //按鈕樣式 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", }); } //初始化fileinput控件（第一次初始化） initFileInput("file-0", "/upload"); </script> </body> </html>