参考博客： https://blog.csdn.net/linhaiyun_ytdx/article/details/76215974
https://www.cnblogs.com/parker-yu/p/7207071.html
最近在最接口对接，需要将文件和一些其他参数发送到其他系统中去，发送文件用到了bootstrap fileinput。
一、首先要下载插件包
插件下载地址：https://github.com/kartik-v/bootstrap-fileinput/
二、引入js和css文件
<link rel="stylesheet" href="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/css/fileinput.min.css"><script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/fileinput.min.js"></script><script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/locales/zh.js"></script>
三、代码：
1、页面文件
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@include file="/context/mytags.jsp"%><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> ?<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script><link rel="stylesheet" href="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/css/fileinput.min.css"><script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/fileinput.min.js"></script><script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/locales/zh.js"></script><!DOCTYPE html><html><head> ???<meta charset="utf-8"> ????<title>bootstrap fileinput上传</title></head><body><div align="center"> ???<div class="container-fluid" style="width: 90%; margin-top: 2%"> ???????<form class="form-horizontal" id="form" action="" method="post" enctype="multipart/form-data"> ???????????????????????<div class="form-group"> ???????????????<label for="exec_file" class="col-sm-2 control-label">上传文件<font color="red">*</font>:</label> ???????????????<div class="col-sm-10"> ???????????????????<input id="input-id" name="file" multiple type="file" data-show-caption="true" data-show-preview="false"> ???????????????</div> ???????????</div> ???????????????????????<div class="form-group"> ???????????????<label for="name" class="col-sm-2 control-label">文件名称<font color="red">*</font>:</label> ???????????????<div class="col-sm-10"> ???????????????????<input type="text" class="form-control" id="name" placeholder="请输入文件名称"> ???????????????</div> ???????????</div> ???????????????????????<div class="form-group"> ???????????????<label for="description" class="col-sm-2 control-label">描述:</label> ???????????????<div class="col-sm-10"> ???????????????????<textarea rows="3" cols="2" class="form-control" id="description" placeholder="请输入描述"></textarea> ???????????????</div> ???????????</div> ???????</form> ???</div></div> ???<script> ???????$(function() { ???????initFileInput("input-id"); ???}) ???function initFileInput(ctrlName) { ???????var control = $(‘#‘ + ctrlName); ???????control.fileinput({ ???????????language : ‘zh‘, //设置语言 ??????????????uploadUrl : "addScriptJson.do", //上传的地址 ?????????????allowedFileExtensions : [ ‘jpg‘, ‘gif‘, ‘png‘, ?‘bat‘, ?‘txt‘ ],//接收的文件后缀 ?????????????maxFilesNum : 5,//上传最大的文件数量 ?????????????//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}！", ???????????uploadExtraData:function (previewId, index) { ???????????????//向后台传递的额外参数 ???????????????var otherData = getdata(); ???????????????return otherData; ???????????} ???????}).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(‘文件上传成功！‘ + data.id); ???????}).on(‘fileerror‘, function(event, data, msg) { //一个文件上传失败 ?????????????console.log(‘文件上传失败！‘ + data.id); ???????}) ???} ???function getdata(){ ???????var name = $("#name").val() ; ???????var description = $("#description").val() ; ???????????????var scriptJson = { ???????????"name": name, ???????????"description": description ???????} ???????return scriptJson; ???} </script> ?</body>2、后台代码
@Description("新增脚本信息")@RequestMapping(value = "addScriptJson", method = RequestMethod.POST)@ResponseBodypublic String addScriptJson(@RequestParam MultipartFile file, HttpServletRequest request, HttpServletResponse response) { ???????String name = request.getParameter("name"); ???????String description = request.getParameter("description"); ???????System.out.println(name); ???????System.out.println(description); ???????????????String filePath = "";// jar包的路径 ?????????if (!file.isEmpty()) { ?????????????File temp = new File(""); ?????????????filePath = temp.getAbsolutePath() + "\\" + file.getOriginalFilename(); ??????????????BufferedOutputStream out; ?????????????try { ?????????????????out = new BufferedOutputStream(new FileOutputStream(new File(filePath))); ??????????????????out.write(file.getBytes()); ?????????????????out.flush(); ?????????????????out.close(); ?????????????} catch (FileNotFoundException e) { ?????????????????e.printStackTrace(); ?????????????} catch (IOException ex) { ?????????????????ex.printStackTrace(); ?????????????} ??????????} ???????????????AjaxJson ajaxJson = new AjaxJson(); ???????try { // 这里处理业务逻辑 ???????} catch (Exception e) { ???????????ajaxJson.setSuccess(false); ???????????ajaxJson.setMsg(e.getMessage()); ???????????e.printStackTrace(); ???????} ???????return ajaxJson.getJsonStr(); ???}bootstrap fileinput上传文件
原文地址：https://www.cnblogs.com/xiehongwei/p/8718161.html