ajax上传文件无返回

最新推荐文章于 2022-09-10 01:20:50 发布

原创最新推荐文章于 2022-09-10 01:20:50 发布 · 657 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#随记

随记专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用AJAX进行文件上传时遇到的问题及解决方案。问题表现为上传后前端无法接收到返回信息。通过调整前端设置，移除dataType属性，并确保后端正确响应，成功实现了上传文件后的数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从网上摘的ajax上传代码，上传文件无返回。直接上全部代码：

<body>
<form id="testUpFile" enctype="multipart/form-data">
<input type="file" name="testfile"><br>
<input type="button" value="提交" id="sbmt">
</form>
</body>
<script type="text/javascript">
$(document).on("click","#sbmt",function(){
$.ajax({
url:'<%=request.getContextPath()%>/testfile',
type:'post',
data:new FormData($("#testUpFile")[0]),
processData:false,
contentType:false,
dataType:'json',
success:function(dts){
alert(dts)
}
})
})
</script>

返回数据如果只是一个字符串就会json解析不出来。看起来像是无返回。修改后

<body>
<form id="testUpFile" enctype="multipart/form-data">
<input type="file" name="testfile"><br>
<input type="button" value="提交" id="sbmt">
</form>
</body>
<script type="text/javascript">
$(document).on("click","#sbmt",function(){
$.ajax({
url:'<%=request.getContextPath()%>/testfile',
type:'post',
data:new FormData($("#testUpFile")[0]),
processData:false,
contentType:false,
success:function(dts){
alert(dts)
}
})
})
</script>

只要删除dataType:'json',就可以了。

后台代码：

/**
* 测试文件上传
*/
@RequestMapping(value="/testfile",method=RequestMethod.POST,produces = "text/html; charset=UTF-8")
@ResponseBody
public String fileUpload(@RequestParam("testfile") MultipartFile file){
String name=file.getName();
System.out.println(name);
return "上传完成";
}