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

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

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

[html] view plaincopy

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

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

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

[html] view plaincopy

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

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

[javascript] view plaincopy

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