我正在尝试使用jquery ajax方法进行fileupload。但这会导致客户端出现415(不支持的媒体类型)错误。但是如果使用非ajax请求,我的代码可以正常工作。
我的 Controller 代码。
@RequestMapping(value = "/imageUpload", headers = "content-type=multipart/*", method = RequestMethod.POST, consumes = "application/json")
public @ResponseBody
String uploadImage( @RequestParam("fileData") MultipartFile multipartFile, HttpServletRequest request )
{
// statements
}
我的查看页面
<form id="uploadForm" action="imageUpload" method="post" enctype="multipart/form-data">
<div>
<input type="file" id="fileData" name="fileData" />
<input type="submit" id="submitContent" value="upload" />
</div>
</form>
和ajax电话。
$("#uploadForm").submit(function (e) {
e.preventDefault();
var $form = $("#uploadForm");
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
dataType : 'json',
enctype: 'multipart/form-data',
processData: false,
success: function(msg){
$( "#editor" ).append(msg);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + XMLHttpRequest); alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
});
我已经尝试了几种方法,例如设置 contentType:false 。
因此,如有需要,请建议我进行任何更改。
最佳答案
看看这个Sending files using a FormData object
来自文件元素的数据未序列化,请使用new FormData()
初始化数据,然后添加包括data
元素的表单元素。
该代码将起作用
$("#uploadForm").submit(function(e) {
e.preventDefault();
var $form = $("#uploadForm");
var fd = new FormData($(this)[0]);
console.info(fd);
$.ajax({
type : 'POST',
url : $form.attr('action'),
data : fd,
cache : false,
processData : false,
contentType : false,
success : function(response) {
console.info(response);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
console.info("Status: " + XMLHttpRequest);
alert("Status: " + textStatus);
alert("Error: " + errorThrown);
}
});
});
要添加其他表单变量,请使用
fd.append(...)