您的位置：首页 > 其它

关于文件上传只能用表单提交而不能异步提交的问题

2018-01-05 10:53 633 查看
1.文件（图片/文档）上传就spring自带上传工具而言，只能用表单提交submit方式进行，不能使用ajax异步提交表单，因为异步提交之后input标签的内容就被springMVC解析成了字符串，无法获取文件名称和地址。页面如下：

<form name="fileForm" id="fileForm" action="/manage/img/upload" method="post"  enctype="multipart/form-data">
<table>
<tr>
<td align="right">
<label style="font-size: 15px;">添加图片：</label>
</td>
<td>
<input type="file" name="file">
<button type="button" onclick="uploadFormSubmit();">上传</button>
</td>
</tr>
</table>
</form>

2.js代码如下：

function uploadFormSubmit(){
	var fo = document.getElementsByName("fileForm");
	$(fo).submit();
}
3.当然可以用多种方式去提交表单，但是ajax异步请求不行。后台代码如下（input之所以

type="file" name="file"  因为后台会有一个专门的file文件类去接收上传的文件，框架封装）：


@RequestMapping(value = "/manage/img/upload",method = RequestMethod.POST)
public Object imgUpload(@RequestParam("file") CommonsMultipartFile file){

logger.info("=====上传图片=====图片:"+file);
String path="D:/"+file.getOriginalFilename();
File newFile=new File(path);
//通过CommonsMultipartFile的方法直接写文件（注意这个时候）
try{
file.transferTo(newFile);
}catch (Exception e){
}
return path;
}

4.如此就遇到一个尴尬的场面，当你存储完文件之后，想返回存储路径到当前页面时，发现根本跳不过去，异步请求又不行，如此求助各路大牛终于找到解决办法：

1）引入js文件 jQuery-form.js文件（官网可以下载，或者加入下面的群群文件有）；

2）页面js代码改造：

function uploadFormSubmit(){
/*var fo = document.getElementsByName("fileForm");
$(fo).submit();*/
$("#fileForm").ajaxSubmit({
url: "/manage/img/upload",
type: "post",
success: function (data) {
var img_url = data.body;
}
});
}

3）如此就获取到后台返回的文件存储路径img_url

有什么问题欢迎入群研讨
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ajax 表单 异步 文件图片上传 返回表单提交的结果
相关文章推荐
新的分享
章节导航