Databases
StackOverflow2013
Postsdbo
POLoading an image from the server's file system dynamically in ASP.NET, via jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLoading an image from the server's file system dynamically in ASP.NET, via jquery
    text
    copied!<p><strong>UPDATE: This is now a dead question. While debugging further I realized the server (which I need to test this part of my code on, due to file permissions and such) was not getting my updates from VS2010, even though I published them to it. Frustrating. Anyway, all this works fine. Perhaps it could be used by someone else trying to figure out how to do a similar thing? Thanks everyone for your help.</strong></p> <p>This one's been driving me crazy for a couple days.</p> <p>What I have is a simple list of image thumbnails, which when clicked on should display the full-size image in another div via some jquery. </p> <p>I get the thumbnail image data and full-size image's filepath from the database. The corresponding full-size image is stored on the same server as the IIS instance. </p> <p>We do not want to display the filepath in the rendered HTML, so what we do is encrypt the filepath and send that as a parameter to a generic handler, which decrypts it, loads the file from the server, and outputs it as a byte array stream. </p> <p>The handler works as intended, however the problem arises when trying to do the jquery html part. Instead of displaying the image in the div, it opens a new browser tab and shows the image from the handler just as would happen if javascript was disabled. What I need is the image to show in the #photosLarge div, which would happen if we used an image URL or something.</p> <p>Here's my relevant code:</p> <p>View:</p> <pre><code>&lt;ul class="thumbnails"&gt; @For Each photo In Model.Photos Dim p As MyProject.Models.FolderImage = photo Dim FullSizeLink As String = "/Handlers/GetImage.ashx?file=" &amp; p.DocPath @:&lt;li&gt;&lt;a href="@FullSizeLink" class="thumbnail"&gt;&lt;img src="@p.Thumbnail.ToString" /&gt;&lt;/a&gt;&lt;/li&gt; Next &lt;/ul&gt; &lt;div id="photoLarge"&gt;&lt;/div&gt; </code></pre> <p>js:</p> <pre><code>$(".thumbnail").click(function () { var image = $(this).attr("href"); $('#photoLarge').hide(); $('#photoLarge').fadeIn('slow'); $('#photoLarge').html('&lt;img src="' + image + '"/&gt;'); return false; }); </code></pre> <p>My Handler:</p> <pre><code>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 &gt; 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 </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload