2

アプリケーションでアップロードされた画像を表示するポップアップとして 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">&nbsp;</p>
          <input type="submit" value="" class="upload-photo-but" />&nbsp;&nbsp;&nbsp; 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 がポップアップ表示されます。

前もって感謝します

4

0 に答える 0