jquery - 通过 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');
});