通过 jquery 在 ASP.NET 中从服务器的文件系统动态加载图像

Question

更新： 现在这是一个死问题。在进一步调试时，我意识到服务器（由于文件权限等原因，我需要在其上测试我的这部分代码）没有从 VS2010 获取我的更新，即使我将它们发布到它。令人沮丧。无论如何，这一切都很好。也许其他人可以使用它来试图弄清楚如何做类似的事情？感谢大家的帮助。

这几天让我发疯了。

我所拥有的是一个简单的图像缩略图列表，单击该列表时应通过一些 jquery 在另一个 div 中显示全尺寸图像。

我从数据库中获取缩略图数据和全尺寸图像的文件路径。相应的全尺寸图像存储在与 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');
});