注意:
- form表单提交input的type=file时,form的enctype="multipart/form-data",才能提交file的文件流到后台
- 必须用FormData对象存储和提交表单中的值
- FormData的append方法存储表单数据
下面以上传图片为例:
HTML代码:
<form action="" method="post" id="addProduct">
产品图片:<input type="file" name="file" id="file"/>
<input type="button" value="添加" id="add_button"/>
</form>
JS代码:
var url = document.getElementById("file").value; //获取图片名字
var hasFile = url === ""; //判断是否选中图片
console.log(hasFile);
url = url.split("."); //获取图片后缀名
image_url = "图片" + "." + url[url.length - 1]; //重新生成图片名
upImage(image_url);
function upImage(image_url) {
var formData = new FormData($("#addProduct")[0]); //获取表单的图片数据
// console.log($('#file')[0]);
// formData.append("file", $('#file')[0]);
//
formData.append("fileName", image_url);
$.ajax({
type: "post",
url: "/cv/private/upimage", //接受处理的url
async: true,
data: formData,
processData: false, //必须false才会避开jQuery对 formdata 的默认处理
contentType: false, //必须false才会自动加上正确的Content-Type
success: function (data) {
console.log(data);
}
});
java代码:
//成功返回1
@RequestMapping("/upimage")
public void upImage(@RequestParam("file") MultipartFile file, @RequestParam("fileName") String fileName, HttpServletResponse response, HttpServletRequest request) throws IOException {
int num;
if (!file.isEmpty()) {
//System.out.println(1);
String dirPath = request.getSession().getServletContext().getRealPath("/") + "/upImage";
File filePath = new File(dirPath);
System.out.println(filePath.getAbsolutePath());
if (!filePath.exists()) {
//System.out.println(2);
response.getWriter().print("{\"num\":" + 0 + "}");
return;
}
try {
//System.out.println(3);
file.transferTo(new File(dirPath + "/" + fileName));
num = 1;
response.getWriter().print("{\"num\":" + num + "}");
} catch (Exception e) {
e.printStackTrace();
//System.out.println(4);
response.getWriter().print("{\"num\":" + 0 + "}");
}
}//end if
else {
response.getWriter().print("{\"num\":" + 0 + "}");
}
}
参考: