Ajax实现文件上传(Spring MVC)

前端表单 和 JQuery jsp/html代码

使用JQuery

?

1	<script src="static/js/jquery-3.4.1.js"></script>

　　

前端表单

?

1 2 3 4 5

<form id="form-avatar" enctype="multipart/form-data"> 　　<p>请选择要上传的文件：</p> 　　<p><input type="file" name="file" /></p> 　　<p><input id="btn-avatar" type="button" value="上传" /></p> </form>

　　

ajax请求服务器

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<script> function uploadfile(){ 　　$.ajax({ 　　　　url : "/url/upload", 　　　　data: new FormData($("#form-avatar")[0]), 　　　　type : "POST", 　　　　// 告诉jQuery不要去处理发送的数据，用于对data参数进行序列化处理 这里必须false 　　　　processData : false, 　　　　// 告诉jQuery不要去设置Content-Type请求头 　　　　contentType : false,   　　　　success : function(json) { 　　　　　　alert("执行成功"); 　　　　　}, 　　　　error : function(json) { 　　　　　　alert("执行失败"); 　　　　} 　　}); } 　　$("#btn-avatar").on("click",uploadfile); </script>

 

导入maven依赖

<!--文件上传-->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>

 

并且配置spring mvc提供的文件上传的类

<!--文件上传配置-->
<bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
　　<!-- 请求的编码格式，必须和jSP的pageEncoding属性一致，以便正确读取表单的内容，默认为ISO-8859-1 -->
　　<property name="defaultEncoding" value="utf-8"/>
　　<!-- 上传文件大小上限，单位为字节（10485760=10M） -->
　　 <property name="maxUploadSize" value="10485760"/>
</bean>

 

 

Controller.java

?

1 2 3 4 5 6 7 8 9 10 11 12 13

@PostMapping("/upload") public void fileUpload2(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request) throws IOException { 　　//上传路径保存设置 　　String path = request.getServletContext().getRealPath("/upload"); 　　File realPath = new File(path); 　　if (!realPath.exists()) { 　　　　realPath.mkdir(); 　　} 　　//上传文件地址 　　System.out.println("上传文件保存地址：" + realPath); 　　//通过CommonsMultipartFile的方法直接写文件（注意这个时候） 　　file.transferTo(new File(realPath + "/" + file.getOriginalFilename())); }