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)バックグラウンドアクションを構築し、formフォームから提出されたファイルアップロード処理を処理し、取得したピクチャパスをoutで出力し、具体的なピクチャパスおよびその他の情報をJSOONObjectで保存し、ページを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);
		}