JSP图片上传无刷新实现预览

最近项目开发中，需要进行图片上传，同时实现无刷新图片预览功能，通过搜索，发现有很多插件比如jquery的uploadify可以实现这个功能，如果不使用插件，可以使用iframe框架方式来实现无刷新图片预览：

(1)在jsp页面使用form表单构建页面图片上传界面：

<div id="sendImageDiv" style="width: 100%; height: 205px;border:0px solid yellow">
											<form action="<%=basePath%>lib/kindeditor/jsp/upload_json.jsp"  method="post"  enctype="multipart/form-data" target="hidden_frame_name">
						      						<div style="margin-top:50px;margin-left:200px;font-size: 12px;font-family: ''Microsoft YaHei', Helvetica, Verdana, Arial, Tahoma;">注:图片大小最大不能超过1M! </div>  
										            <div style="margin-top:10px;margin-left:200px;font-size: 12px;font-family: 'Microsoft YaHei', Helvetica, Verdana, Arial, Tahoma;"><input type="file" name="file"/></div>  
										            <div	style="margin-top:10px;margin-left:200px;font-size: 12px;font-family: 'Microsoft YaHei', Helvetica, Verdana, Arial, Tahoma;"><input type="submit" value="上传"/></div>  
	      									</form>
										</div>
<iframe name='hidden_frame_name' id="hidden_frame_id" style="display:none"></iframe> 

form的target属性指向子框架iframe，属性名与iframe框架名相同

(2)构建后台action，处理form表单提交的文件上传处理,将获取到的图片路径通过out输出，具体的图片路径以及其他信息可以通过JSONObject保存，然后页面通过JS进行JSON的获取：

JSONObject obj = new JSONObject();
		obj.put("error", 0);
		obj.put("url", saveUrl + newFileName);
		String guid = UUIDGenerator.getGuid();
		out.println(obj.toJSONString());
		out.println("<script>window.parent.imagePreview('" + obj.toJSONString() +"', '" + guid + "')</script>");

由于form表单实现了target定向，因此action处理文件上传之后，out输出的内容是保存在iframe子框架中。通过out输出的js函数，就可以调用父窗口也就是操作图片上传所在页面的函数（相当于回调函数），获取传入的json参数，对父窗口进行处理，插入图片标签，图片的src就来自于JSON中的url：

//预览图片
		function imagePreview(imageUrl, guid) {
			//alert("imageUrl: " + imageUrl);
		    var srcUrl = $.parseJSON(imageUrl)
			//alert("url: " + srcUrl.url);
		    var html = '<img src="'+ srcUrl.url  + '" width="80px" height ="120px" id="' + guid + '" οnclick="imageResize(this.id)" title="点击放大/缩小"/>';
		    $("#imagePreview").html(html);
		}