SpringMVC+Ajax用FormData对象上传页面的图片（文件），并且立马在页面上显示出来

页面表单：

<form id="frm_identityA" action="" enctype="multipart/form-data">
	<span style="display:none">
		<input type="file" id="identityA" name="identityA" value="">
	</span>
	<input type="hidden" name="mobile" value="***********">
</form>

页面图片标签和按钮：

<img id="img_identityA" src="app/images/icon011.png" alt="" name="img_identityA"/>

<button type="button" id="button_identityA" class="btn btn-primary btn-lg btn-block">点击上传图片</button>

页面操作：

// 点击按钮的时候选择图片
$("#button_identityA").click(function(){
	$("#identityA").click();
});
// input框改变的时候将图片发送给后台
$("#identityA").change(function() {
	var formData = new FormData($("#frm_identityA")[0]);
	$.ajax({
		url : "userregeste/file/upload.do", // 自行按需配置好完整的url，包括ip和端口号
		type : "POST",
		data : formData,
		async : false,
		cache : false,
		contentType : false,
		processData : false,
		success : function(returndata) {
			alert("success");
			$("#img_identityA").attr("src","userregeste/file/showImages.do?mobile=***********&name=identityA&"+new Date().toTimeString());
			$("#img_identityA").attr("width","124");
			$("#img_identityA").attr("height","124");
		},
		error : function(returndata) {
			alert("error");
			$("#img_identityA").attr("src","app/images/icon011.png");
		}
	});
});

Spring配置：

<!-- 图片获取 maxUploadSize：设置最大限制 字节为单位-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	<property name="maxUploadSize" value="1024000"></property>
</bean>

Action中的代码：
1、图片上传

@Controller
@RequestMapping("/userregeste")
public class ImageUpLoadAction {
	
	/**
	 * 存放上传的图片信息
	 */
	private static Map<String,byte[]> images;
	
	static {
		images = new HashMap<String, byte[]>();
	}
	
	@RequestMapping("/file/upload")
	public ProcessResultModel upLoad(HttpServletRequest request,HttpServletResponse response) {
		// 从请求中获取到文件信息需要将请求转换为MultipartHttpServletRequest类型
		MultipartHttpServletRequest MulRequest = request instanceof MultipartHttpServletRequest ? (MultipartHttpServletRequest) request : null;
		request.getParameter("mobile");// 依然可以从请求中获取到除图片之外的参数
		Iterator<String> fileNames = MulRequest.getFileNames();
		if (fileNames.hasNext()) { // 遍历请求中的图片信息
			String fileName = fileNames.next(); // 图片对应的参数名
			log.debug("fileName:" + fileName);
			file = MulRequest.getFile(fileName); // 获取到图片
			if (file != null) {
				log.debug("file.getSize():" + file.getSize()); // 图片大小
				file.getBytes();// 可以获取到图片的字节数组
				images.put(fileName,file.getBytes());// 获取到图片以字节数组形式保存在服务器内存中
			}
		}
	}
}

2、图片显示
Ajax请求发送成功之后的方法中的操作，
$("#img_identityA").attr("src","userregeste/file/showImages.do?mobile=***********&name=identityA&"+new Date().toTimeString());
值得一提的是，img标签中的src属性，对于UI人员来说就是存放静态图片资源的，但是对于程序员来说，应该要知道img标签实际上会根据src属性去发送一次请求。同时，浏览器对于img的src属性的处理方式是如果src属性值不变，只会发送一次请求，所有加上new Date().toTimeString()，使每次的请求都不相同。
代码如下：

@RequestMapping("/file/showImages")
public String showImages(HttpServletRequest request,HttpServletResponse response) throws IOException {
	log.debug("请求地址："+request.getRequestURI()+",开始获取图片");
	OutputStream sout = null;
	String mobile = request.getParameter("mobile");
	String name = request.getParameter("name"); // 图片名称
	log.debug("mobile："+mobile+"	name："+name);
	if (mobile == null || name == null) {
		log.debug("手机号或图片名为空，获取图片失败！");
		return null;
	}
	byte[] pictrue = null;
	// 从本地Map中去获取images图片
	pictrue = images.get(name);
	log.debug("图片大小："+pictrue.length);
	try {
		if (pictrue != null) {
			response.setContentType("text/html");
			sout = response.getOutputStream();
			sout.write(pictrue);
			sout.flush();
			sout.close();
			sout = null;
		} else {
			return null;
		}
	} catch (Exception e) {
		e.printStackTrace();
	} finally {
		if (sout != null) {
			sout.close();
			sout = null;
		}
	}
	log.debug("返回图片成功！");
	return null;
}

如此，页面上会成功的显示图片。

*需要的jar包除了SpringMVC的所有jar包之外，还需要
commons-fileupload-1.3.1.jar
commons-io.jar
*设置enctype="multipart/form-data"后，表单数据是以二进制形式进行传输的，commons-fileupload-1.3.1.jar 即是帮我们解析二进制数据并且封装到parameter里面，不添加这个包，从HttpServletRequest获取不到参数，可以获取二进制流数据自行解析。
*以上的实现动态的将图片传送到后台，可以在后台对图片进行一系列处理，效率比较高。

页面效果：