因为在框架中上传文件时不适合直接用form提交,因为这样会刷新页面。我们一般会用ajax进行异步上传。此方法可上传多种类型文件。
html代码:
<form action="" method="post" enctype="multipart/form-data" id="form1">
<div class="modal fade" id="trainInfoModal" tabindex="-1" role="dialog" aria-labelledby="orderInfoModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="orderInfoModalLabel1">
培训产品上传
</h4>
</div>
<div class="modal-body">
<div class="row" style="margin-top: 10px">
<div class="col-sm-5 " style="text-align:center;">
<label for="file"class="btn btn-default">上传培训产品</label>
<input id="file"type="file"style="display:none" class="form-control" name="file" multiple="multiple">
<!--注意点:要多选文件要用multiple="multiple"-->
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary" οnclick="uploadTrainProduct()">
确定
</button>
</div>
</div>
</div>
</div>
</form>
js:
function uploadTrainProduct(){
var formData = new FormData($("#form1")[0]); //重点:要用这种方法接收表单的参数
$.ajax({
url : "/it/orderManage/uploadTrainProduct",
type : 'POST',
data : formData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
async : false,
success : function(data) {
if(data){
}
}
});
}
controller:
application/json 这个跟提交的content/type 一直否则报 406 错误,并且@ResponseBody 对应返回类型为String 或者 Object 简单类型,否则也报406错误。
@RequestMapping(value = "/uploadTrainProduct", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
@ResponseBody
public String uploadTrainProduct(
@RequestParam(value = "file") MultipartFile[] files, //这样接收文件
@RequestParam(value = "id") String id, //接收其他参数
@RequestParam(value = "content") String content,
HttpServletRequest request
) {
try {
for (MultipartFile file : files) { //循环保存文件
uploadFile(file, request);
}
// 返回前台
return "success";
} catch (Exception e) {
e.printStackTrace();
return "fail";
}
}
public String uploadFile(MultipartFile file, HttpServletRequest request) throws IOException {
String fileName = file.getOriginalFilename();
String path="d:/images/m2"; //设置文件保存路径
// File tempFile = new File(path, new Date().getTime() + String.valueOf(fileName));
File tempFile = new File(path, String.valueOf(fileName));
if (!tempFile.getParentFile().exists()) { //创建文件夹
tempFile.getParentFile().mkdir();
}
if (!tempFile.exists()) {
tempFile.createNewFile();
}
file.transferTo(tempFile);
return "images/" + tempFile.getName();
}
这个案例也可以演变为一个表单上,一个选择图片,一个选择视频的需求。
public Boolean uploadTrainProduct(
@RequestParam(value = "a_name") String name, //参数名称
@RequestParam(value = "textfield") String textfield, //图片文件名称
@RequestParam(value = "file") MultipartFile imageFile, //图片文件二进制
@RequestParam(value = "videofield") String videofield, //视频文件名称
@RequestParam(value = "videofile") MultipartFile videoFile, //视频文件二进制
HttpServletRequest request
) {
return ture;
}
结束