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>