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

页面表单:


页面图片标签和按钮:


页面操作:

// 点击按钮的时候选择图片
$("#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配置:



	

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

@Controller
@RequestMapping("/userregeste")
public class ImageUpLoadAction {
	
	/**
	 * 存放上传的图片信息
	 */
	private static Map images;
	
	static {
		images = new HashMap();
	}
	
	@RequestMapping("/file/upload")
	public ProcessResultModel upLoad(HttpServletRequest request,HttpServletResponse response) {
		// 从请求中获取到文件信息需要将请求转换为MultipartHttpServletRequest类型
		MultipartHttpServletRequest MulRequest = request instanceof MultipartHttpServletRequest ? (MultipartHttpServletRequest) request : null;
		request.getParameter("mobile");// 依然可以从请求中获取到除图片之外的参数
		Iterator 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获取不到参数,可以获取二进制流数据自行解析。
*以上的实现动态的将图片传送到后台,可以在后台对图片进行一系列处理,效率比较高。

页面效果:


你可能感兴趣的:(SpringMVC)