springMVC+jquery实现图片上传

需要的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类型解析器：

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding">
            <value>UTF-8</value>
        </property>
        <property name="maxUploadSize">
            <value>10485760</value><!-- 10M -->
        </property>
        <property name="maxInMemorySize">
            <value>4096</value>
        </property>
    </bean>

注意：如果是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实例上。可以通过它提供的迭代器，或者get方法去取值。

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