1、在页面中引入需要的js和css样式,引入的路径根据你得具体项目路径,我的是放在fileinput目录下。
<!-- 引入bootsreap上传插件fileinput相关 -->
<link rel="stylesheet" type="text/css" href="${ctxStatic}/fileinput/fileinput.min.css">
<script src="${ctxStatic}/fileinput/fileinput.min.js"></script>
<script src="${ctxStatic}/fileinput/fileinput_locale_zh.js"></script>
2、上传文件div,注意这里的name属性与后台是对应的。
<!--bootstrap上传插件fileinput按钮-->
<div hidden id = "filediv" class="pl_20 pr_20">
<p class="ClassATitle control-label">选择文件 <span class="borBg"></span></p>
<input name = "files" id="filesupload" type = "file" class=" file-loading" multiple />
</div>
3、初始化上传,这里的一些属性包括回调方法都可以看官方api,特别全。
//*************************上传文件js开始********************************************//
//初始化上传控件的样式
$("#filesupload").fileinput({
language: 'zh', //设置语言
uploadUrl: "<%=basePath%>a/dd/dd", //上传的地址,访问后台接口地址
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
uploadAsync: false,//关闭异步上传,改为同步上传。
dropZoneEnabled: false,//是否显示拖拽区域
autoReplace : false,
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
minFileCount: 1,
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量 !",
//向后台传递参数
uploadExtraData:function (previewId, index) {
return {
"path":$("#filepath").val(),
"ywh":$("#ywh").val()
};
}
});
//******************上传文件js结束************//
4、后台代码
/**
*
* @Title: upload
* @Description: TODO(上传附件)
* @param request
*/
@RequestMapping(value = "uploadfile")
public void upload(HttpServletRequest request, HttpServletResponse response) {
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = null;
//封装返回前台map
Map<String, Object> map = new HashMap<String, Object>();
//获取上传目录地址 ,前台传递的参数
String path = request.getParameter("path");
String ywh = request.getParameter("ywh");
//文件上传到本地地址
String localpath = "D://测试上传//"+path;
//获取文件列表信息
List<MultipartFile> files=multiRequest.getFiles("files");
//循环文件获取单个文件进行上传
for(MultipartFile file:files){
//获取上传文件名称
String fileName=file.getOriginalFilename();
//获取上传文件个数
Long fileSize=file.getSize();
if(null!=fileName&&!"".equals(fileName)){
try{
out = response.getWriter();
// 创建文件要保存的路径
File uploadFile=new File(localpath);
//文件路径不存在则创建
if(!uploadFile.exists()||null==uploadFile){
uploadFile.mkdirs();
}
//获取文件类型
String fileType=fileName.substring(fileName.lastIndexOf(".")+1,fileName.length());
//文件真实存放路径
String filePath=uploadFile.getPath()+File.separator + fileName;
//保存文件
file.transferTo(new File(filePath));
map.put("message", "success");
}catch(Exception e){
map.put("meaasge", "failed");
e.printStackTrace();
}
}
}
out.print(JSONUtils.toJSONString(map));
}