今天被这个上传图片搞的头大,特此记录一下~
刚开始我是用通过传统的 form 表单提交的方式上传文件
<form id="form1" name="form1" th:action="" enctype="multipart/form-data"
accept-charset="utf-8" method="post" target="rfFrame">
<p>上传文件:<input type ="file" name="file"/></p>
<input type="submit" value="上传"/>
</form>
不过传统的 form 表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用 Ajax 的方式进行请求的。
使用 serialize() 对 form 表单进行序列化提交
$.ajax({
url: "",
type: "POST",
data: $('#form1').serialize(),
success: function(data) {
},
error: function(data) {
}
});
如上,通过$('#uploadForm').serialize()可以对 form 表单进行序列化,从而将 form 表单中的所有参数传递到服务端。
但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的,所有说用上面的方式在后台只能拿到空值。不过如今主流浏览器都开始支持一个叫做 FormData 的对象,有了这个对象就可以轻松地使用 Ajax 方式进行文件上传了。
使用 FormData 进行 Ajax 请求并上传文件
<form id="form1">
<p>上传文件:<input type="file" name="file" /></p>
<input type="button" value="上传" onclick="upload()" />
</form>
function upload() {
var formData = new FormData($("#form1")[0]);
$.ajax({
url: '',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data) {
},
error: function(data) {
}
});
}
经过我的亲测,contentType和processData这二个参数一定要加上,不然后台拿的也是空值。
controller层代码:
@RequestMapping(value = "")
@ResponseBody
public String upload(@RequestParam("file") MultipartFile file) {
//保存图片到服务器
String path = "e:\\shopbop\\idCards\\";
File filePath = new File(path);
if (!filePath.exists()) {
filePath.mkdirs();
}
String fileNameA = "";
if (file.isEmpty()) {
return "fail";
}
//获取后缀
String suf = file.getOriginalFilename()
.substring(file.getOriginalFilename().indexOf(".") + 1);
fileNameA = "自己想要设置的名字" + "." + suf;
try {
FileUtils.writeByteArrayToFile(new File(path + fileNameA),
file.getBytes());
} catch (IOException e) {
e.printStackTrace();
return "fail";
}
return "succ";
}
提醒一下,FileUtils是org.apache.commons.io中的~