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

2014-05-07  且看且珍惜


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

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

  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的获取:

  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.         }  



    猜你喜欢
    发表评论
    喜欢该文的人也喜欢 更多