アプリケーションでアップロードされた画像を表示するポップアップとして jQuery fancybox を使用しています。次のように画像をアップロードする私のコード: 写真の変更
<div class="change-photo" style="min-height:250px;">
<div class="current-photo">
<span>Current Photo</span>
<img src="getProfilePic.html?userid=${sessionScope.user.userId}" height="100px" width="100px" border="0" class="img" /></div>
<div class="upload-photo">
<p><span>Upload Photo</span></p>
<p>You can upload a JPG or PNG file (File size limit is 4 MB).</p>
<p><input type="file" NAME="file" onchange="checkSize(this);" /></p>
<p > <font style="color:red;">${message}</font></p>
<p class="dot-line"> </p>
<input type="submit" value="" class="upload-photo-but" /> or
<a class="cropImage {width:1024,height:675}" href="uploadPhoto.html"></a>
<a href="javascript:history.back();"><b>Cancel</b></a>
</div>
</div>
</div>
</div> I am using a form submission to a controller which is used to display the uploaded image for cropping. <FORM ENCTYPE="multipart/form-data" METHOD="POST">
ファンシーボックスのスクリプトは次のとおりです
$("#cropImage").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'overlayColor' : '#333',
'hideOnOverlayClick' : false,
'type' : 'iframe',
'hideOnContentClick' : true,
'onClosed': function() { parent.location.reload(true); },
'onComplete' : function() {
$('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
$('#fancybox-content').height($(this).contents().find('body').height()+30);
});
}
});
ポップアップでアップロードされた画像を取得できません。コードに小さな変更を加えた後、例外を含むポップアップが表示されるか、画像をアップロードするために同じ jsp がポップアップ表示されます。
前もって感謝します