前言
做项目时，遇到表单中图像需要跟表单一起提交，这样会造成后台没办法接收到图片。后面上网调查后，明白表单提交时是默认application/x-www-form-urlencoded格式，只接受键值对。所以以下例子采用FormData格式异步提交表单，因为formData格式可以接收文件格式。具体流程
1.引入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>
2.在全局配置文件中引入相关配置
<!--multipart处理类--><bean id="multipartResolver" class="org.springframework.monsMultipartResolver"><property name="maxUploadSize" value="10485760"/><property name="maxInMemorySize" value="4096"/></bean>3, 153, 153);">1
2345 3.定义jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %><body><h1>使用formData形式上传文件</h1><form id="uploadForm" method="post" action="/upload.ajax" ><input type="file" id="avatar" name="avatar" onchange="previewImage('preview',this)" ><img id="preview"><button id="submit" type="button">提交</button></form></body></html><script src="/media/js/jquery-1.10.1.min.js"></script><script type="text/javascript">//检验文件格式并预览function previewImage(preImageId, imageFile) {var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;if (!pattern.test(imageFile.value)) {alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");imageFile.focus();$(imageFile).val("");return false;} else {var path;if (document.all)//IE{imageFile.select();path = document.selection.createRange().text;}else//FF{path = URL.createObjectURL(imageFile.files[0]);}$('#' + preImageId).attr('src', path);}}$('#submit').on('click',function () {var formData = new FormData($( "#uploadForm" )[0]);console.log(formData);$.ajax({type: 'POST',url: '/upload.ajax',data: formData,contentType: false,processData: false,success: function (result) {console.log(result);},});});</script>
4.后台采用MultiPartFile接收文件
@RequestMapping("upload.ajax")@ResponseBodypublic String upload(MultipartFile avatar){//处理avatar逻辑return "success";}
123456
后语
该实现并不难，主要了解表单提交格式和相关实现即可。希望可以帮到相关人员。如果觉得《使用FormData格式上传图像并预览图片》对你有帮助，请点赞、收藏，并留下你的观点哦！
