jqueryによってサーバーのファイルシステムから動的にイメージをロードする

Question

更新： これは現在死んでいる質問です。さらにデバッグしている間、私はそれを公開したにもかかわらず、VS2010から私の更新を取得していないサーバ（ファイルのパーミッションなどのために、私のコードのこの部分をテストする必要がある）を認識しました。挫折。とにかく、これはすべて正常に動作します。おそらく、それは他の誰かが同様のことをする方法を理解しようとすることによって使用される可能性がありますか？みんなあなたの助けをありがとう。

これは私を数日間夢中にしています。

私が持っているのは、イメージサムネイルの単純なリストです。これをクリックすると、フルサイズのイメージを別のdivにいくつかのjqueryで表示する必要があります。

私は、サムネイル画像データとフルサイズ画像のファイルパスをデータベースから取得します。対応するフルサイズのイメージは、IISインスタンスと同じサーバーに格納されます。

レンダリングされたHTMLにファイルパスを表示したくないので、ファイルパスを暗号化してパラメータとしてジェネリックハンドラに送信します。ジェネリックハンドラは、そのファイルを復号化し、サーバからファイルをロードして出力しますバイト配列ストリームとして返す。

ハンドラは意図したとおりに動作しますが、jquery htmlパーツを実行しようとすると問題が発生します。 divに画像を表示する代わりに、新しいブラウザタブを開き、javascriptが無効になった場合と同様にハンドラから画像を表示します。 #photosLarge divに表示される画像は、画像URLなどを使用すると発生します。

ビュー：

<ul class="thumbnails"> 
    @For Each photo In Model.Photos 
     Dim p As MyProject.Models.FolderImage = photo 
     Dim FullSizeLink As String = "/Handlers/GetImage.ashx?file=" & p.DocPath 
     @:<li><a href="@FullSizeLink" class="thumbnail"><img src="@p.Thumbnail.ToString" /></a></li> 
    Next 
</ul> 

<div id="photoLarge"></div> 

JS：

は、ここに私の関連するコードです

$(".thumbnail").click(function() { 
    var image = $(this).attr("href"); 
    $('#photoLarge').hide(); 
    $('#photoLarge').fadeIn('slow'); 
    $('#photoLarge').html('<img src="' + image + '"/>'); 
    return false; 
}); 

マイハンドラ：

Public Class GetImage 
    Implements System.Web.IHttpHandler 
    Implements System.Web.SessionState.IRequiresSessionState 

    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest 

     Dim Common = New Common 
     Dim FilePath As String 
     Dim FileInfo As System.IO.FileInfo 
     Dim FileStream As System.IO.FileStream 
     Dim FileLengthInBytes As Long 
     Dim QueryString As String 
     Dim EncryptionKey as String = "df235s!2" 'that's not my real key ;-) 
     Try 
      QueryString = context.Request.QueryString("file") 
      FilePath = Common.DecryptString(QueryString.Replace(" ", "+"), EncryptionKey).Replace("+", " ") 

      FileInfo = New System.IO.FileInfo(FilePath) 
      FileStream = FileInfo.OpenRead() 
      FileLengthInBytes = FileStream.Length 

      If (FileLengthInBytes > 0) Then 
       Dim FileData(FileLengthInBytes - 1) As Byte 
       FileStream.Read(FileData, 0, FileLengthInBytes) 
       FileStream.Close() 
       context.Response.Clear() 
       context.Response.ContentType = "image/jpeg" 
       context.Response.OutputStream.Write(FileData, 0, FileData.Length) 
       context.Response.End() 
      End If 
     Catch ex As IOException 
      ReturnImageNotFound(context) 
     End Try 
    End Sub 

    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable 
     Get 
      Return False 
     End Get 
    End Property 

''' etc ''' 
End Class 

Answer 1

それはリンクのような音をキャンセルされていませんそれはデフォルトのアクションです。あなたはこれにあなたの関数を変更しようとする可能性があります：

$(".thumbnail").click(function (e) { 
    e.preventDefault(); 

    var image = $(this).attr("href"); 
    $('#photoLarge').html('<img src="' + image + '"/>').hide().fadeIn('slow'); 
});