附件上传插件fileinput+SpringMVC后台代码实现

1.JS，CSS引用

<link rel="stylesheet" href="/bower_components/bootstrap-fileinput/css/fileinput.css" type="text/css">
<script src="/bower_components/bootstrap-fileinput/js/fileinput.js"></script>
<script src="/bower_components/bootstrap-fileinput/js/locales/zh.js"></script><!--汉化JS-->

2.HTML
<input id="file-pic" name="file" type="file" >3.JS代码（属性可以自行百度）
//初始化附件上传控件
p._fileInputOnLoad = function(id){
$('#'+id).fileinput({//初始化上传文件框
multiple:false,
language : 'zh',
uploadUrl: "/files/upload?_csrf="+p.csrf,
autoReplace : true,
showUpload: false, //是否显示上传按钮
maxFileCount : 1,
showPreview : false,
showRemove : false,
allowedFileExtensions : [ "jpg", "png", "gif"],
browseClass : "btn btn-primary", //按钮样式
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
});
}

//附件上传控件绑定事件
p._fileInputMatch = function(id){
$('#'+id).on('filebatchselected', function (event, data, id, index) {
$(this).fileinput("upload");
});
$('#'+id).on("fileuploaded", function(e, data,preview) {
var res = data.response;
$("#imageUrl").val(res.url);
$(".img-circle").attr('src',res.url);
});
}4.后台java代码
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.charset.Charset;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
* @author Mr.Yuan on 2018/02/02.
*/
@Controller
@RequestMapping("/files")
public class FileOperationController {

@PostMapping("/upload")
@ResponseBody
public Map<String, Object> upload(MultipartHttpServletRequest request) throws IOException {
Map<String, Object> json = new HashMap<String, Object>();
MultiValueMap<String,MultipartFile> map = request.getMultiFileMap();
HttpHeaders headers = new HttpHeaders();
headers.setContentType(new MediaType("text", "plain", Charset.forName("UTF-8")));
List<MultipartFile> list = map.get("file");// 获取到文件的列表
String path= "C:/upload"; //文件上传路径信息
for (MultipartFile mFile : list) {
String originalFileName= mFile.getOriginalFilename();//获取文件名称
String UUID = java.util.UUID.randomUUID().toString();
byte[] bytes = mFile.getBytes();//获取字节数组
String fileBname = UUID+"."+mFile.getOriginalFilename().substring(mFile.getOriginalFilename().lastIndexOf(".")+1);
String filePath= path+ File.separator+ fileBname;
FileOutputStream fos= new FileOutputStream(new File(filePath)); //写出到文件
fos.write(bytes);
fos.flush();
fos.close();
json.put("url", filePath);
}
return json;
}
}