|
最近項(xiàng)目開(kāi)發(fā)中，需要進(jìn)行圖片上傳，同時(shí)實(shí)現(xiàn)無(wú)刷新圖片預(yù)覽功能，通過(guò)搜索，發(fā)現(xiàn)有很多插件比如jquery的uploadify可以實(shí)現(xiàn)這個(gè)功能，如果不使用插件，可以使用iframe框架方式來(lái)實(shí)現(xiàn)無(wú)刷新圖片預(yù)覽：
(1)在jsp頁(yè)面使用form表單構(gòu)建頁(yè)面圖片上傳界面：
- <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;">注:圖片大小最大不能超過(guò)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>
(2)構(gòu)建后臺(tái)action，處理form表單提交的文件上傳處理,將獲取到的圖片路徑通過(guò)out輸出，具體的圖片路徑以及其他信息可以通過(guò)JSONObject保存，然后頁(yè)面通過(guò)JS進(jìn)行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表單實(shí)現(xiàn)了target定向，因此action處理文件上傳之后，out輸出的內(nèi)容是保存在iframe子框架中。通過(guò)out輸出的js函數(shù)，就可以調(diào)用父窗口也就是操作圖片上傳所在頁(yè)面的函數(shù)（相當(dāng)于回調(diào)函數(shù)），獲取傳入的json參數(shù)，對(duì)父窗口進(jìn)行處理，插入圖片標(biāo)簽，圖片的src就來(lái)自于JSON中的url：
- //預(yù)覽圖片
- 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="點(diǎn)擊放大/縮小"/>';
- $("#imagePreview").html(html);
- }
|
