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 + '" onclick="imageResize(this.id)" title="点击放大/缩小"/>';
$("#imagePreview").html(html);
}