springMVC使用ajax实现文件上传

springMVC使用ajax实现文件上传

一、 上传之前的准备配置

1、 依赖jar包和 mvc.xml文件配置，参考连接： https://www.cnblogs.com/WJ-163/p/6269409.html
2、 两个jar包

a. commons-io-2.4.jar
b. commons-fileupload-1.3.1.jar

3、一个 springmvc.xml 中配置

<!-- 上传文件拦截，设置最大上传文件大小   10M=10*1024*1024(B)=10485760 bytes -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10485760 " />   <!-- 最大文件大小限制 -->
</bean>

二、 前端html 代码

<center>
<h1>论文导入页面</h1>
<form action="${ctx}/executeImport" method="post" enctype="multipart/form-data">
<input type="file" name="articleFile" class="required" id="articleFile"><br>
<button id="btn_import" onclick="return false"> 导入 </button> <br><br>
</form>
</center>

三、js ajax 代码

$("#btn_import").click(function(){
//避免重复点击,上传多次文件
$("button").attr("disabled","disabled");
var formData=new FormData();
formData.append("articleFile",$("#articleFile")[0].files[0]);
$.ajax({
url:'${ctx}/executeImport',
type:'post',
data:formData,
contentType:false,
processData:false,
cache:false,
success:function(data){
window.location.href='${ctx}/importArticle';
}
});
});

四、后台java 代码

1、 进入上传 页面
@RequestMapping(value={"/importArticle","/importArticle.html"})
public String importArticle(){
return "importArticle";
}

2、执行上传操作
@RequestMapping(value={"/executeImport"},method=RequestMethod.POST)
@ResponseBody
public String executeImport(MultipartFile articleFile) throws Exception{
String originalFilename = articleFile.getOriginalFilename();
File file=new File("C:/"+originalFilename);
try {
articleFile.transferTo(file);
return "true";
} catch (Exception e) {
e.printStackTrace();
}
return "false";
}

五、可能遇到的问题

1、The current request is not a multipart request： http://blog.csdn.net/haha_sir/article/details/79131607
2、 the request was rejected because its size (46066029) exceeds the configured maximum (10485760)： 上传文件大小，超过了springmvc设置的最大文件大小。 解决： a.换小文件上传; b. 调整限定最大文件大小。

<property name="maxUploadSize" value="【设置最大文件大小】" />

六、测试

以上即可实现利用ajax来上传文件，当然这可能是最原始简单版的。 现在大多用插件来实现上传了。 如：
webuploader ， jQuery.upload 。 不过呢，万变不离其宗，只要掌握了原理，用上插件对于您来说，更是如虎添翼啦。

参考资料：三、js ajax 代码：
FormData属性理解