springMVC+jquery实现图片上传

心已赠人 2021-08-19 15:13 510阅读 0赞

### 需要的jar包，添加maven依赖 ###

<dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.1</version>
    </dependency>
    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.4</version>
    </dependency>

> Commons-fileupload 和commons-io。commons-io 不属于文件上传组件的开发 jar 文件，但Commons-fileupload 组件从 1.1 版本开始，它工作时需要 commons-io 包的支持。

### 在springmvc.xml文件中配置multipart类型解析器： ###

### 注意：如果是springboot搭建的环境，在application.properties文件中配置multipart类型解析器。 ###

spring.servlet.multipart.enabled=true
    spring.servlet.multipart.max-file-size=5MB
    spring.servlet.multipart.max-request-size=5MB

### controller代码 ###

@RestController
    @RequestMapping("/nddp")
    public class NDDPConfigController extends BaseController {
    
    	@RequestMapping("/fileupload")
    	public String fileupload(HttpServletRequest request,MultipartFile pic) throws Exception{
    		// 先获取到要上传的文件目录
    		String path = request.getSession().getServletContext().getRealPath("/uploads");
    		// 创建File对象，一会向该路径下上传文件
    		File filePath = new File(path);
    		// 判断路径是否存在，如果不存在，创建该路径
    		if(!filePath.exists()) {
    			filePath.mkdirs();
    		}
    		
    		if (null != pic) {
    			//原始名称
    			String originalFilename = pic.getOriginalFilename();
    			//新图片名称
    			String newFilename = UUID.randomUUID().toString()+originalFilename.substring(originalFilename.lastIndexOf("."));
    			//新图片存储路径
    			File file = new File(path+"/"+newFilename);
    			//将内存中的数据保存到磁盘
    			pic.transferTo(file);
    			
    			return "success";
    		}else {
    			return "error";
    		}
    	}
    }

### 前端代码 ###

<form id="uploadForm" enctype="multipart/form-data">
    	上传证明图片：<input type="file" name="pic" id="pic" accept="image/gif,image/png,image/jpg,image/jpeg"><br/>
    	<input type="submit" value="上传文件"/>
    </form>

$('#uploadForm').submit(function() {
    	      console.log($(this).serialize());//序列化表单，如果有图片时不能这样写。
    	      var pic= document.getElementById('pic').files[0]; //获取文件路径名
    	      var formData = new FormData(); 
    	      formData.append('pic',pic);
    	      console.log(formData.get("pic"));//formDate直接打印是没有数据的，要通过这样取值才能查看
    		  $.ajax({  
    	          url: 'http://localhost:8080/cube/nddp/fileupload.do' ,  
    	          type: 'POST',  
    	          data: formData,  
    	          async: false,  
    	          cache: false,  
    	          contentType: false,  
    	          processData: false,  
    	          success: function (returndata) {  
    	              alert(returndata);  
    	          },  
    	          error: function (returndata) {  
    	              alert(returndata);  
    	          }  
    	     });  
    		});

[FormData对象][FormData]的数据，属性又不是直接挂载在你这个FormData实例上。可以通过它提供的迭代器，或者get方法去取值。

请查看jquery序列化form表单的两种方式：[https://blog.csdn.net/liming1016/article/details/103033844][https_blog.csdn.net_liming1016_article_details_103033844]

[FormData]: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
[https_blog.csdn.net_liming1016_article_details_103033844]: https://blog.csdn.net/liming1016/article/details/103033844