如何在asp.net中使用javascript显示文件夹中的缩略图

Question

我用uploadify上传了一些图像，并将原始文件保存在"uploads“文件夹和"uploads\thumbs”文件夹中，现在我需要的是在main.aspx页面上有一个image.After元素，在这里我需要显示缩略图并单击我需要的缩略图来给它一个灯箱效果。

1.我已经这样做了，但这是向我显示原始图像，而不是thumbnail.So，我如何指向我的缩略图。

2.当使用Lightbox effect时，我如何使用下面的代码管理我的两个图像。

这是我的处理程序代码：

Public Class UploadVB : Implements IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim postedFile As HttpPostedFile = context.Request.Files("Filedata")

        Dim savepath As String = ""
        Dim tempPath As String = ""
        tempPath = System.Configuration.ConfigurationManager.AppSettings("FolderPath")
        savepath = context.Server.MapPath(tempPath)
        Dim filename As String = postedFile.FileName
        If Not Directory.Exists(savepath) Then
            Directory.CreateDirectory(savepath)
        End If
        If Not Directory.Exists(savepath + "\thumbs") Then
            Directory.CreateDirectory(savepath +"\thumbs")
        End If


        postedFile.SaveAs((savepath & "\") + filename)
        Dim fullImage As System.Drawing.Image = New System.Drawing.Bitmap((savepath & "\") + filename)

        Dim newWidth As Integer = 200
        Dim newHeight As Integer = 200

        Dim temp As New Bitmap(newWidth, newHeight)
        Dim newImage As Graphics = Graphics.FromImage(temp)
        newImage.DrawImage(fullImage, 0, 0, newWidth, newHeight)
        temp.Save((savepath +"\thumbs"  & "\") + "t_" + filename)

        context.Response.Write((tempPath & "/") + filename)
        context.Response.StatusCode = 200



    End Sub

下面是我的java脚本代码：

<script type="text/javascript">
$(window).load(
function () {
    $("#Inputfile").fileUpload({
        'uploader': 'scripts/uploader.swf',
        'cancelImg': 'images/cancel.png',
        'buttonText': 'Browse Files',
        'script': 'UploadVB.ashx',
        'folder': 'uploads',
        'fileDesc': 'Image Files',
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
        'queueSizeLimit':9999,
        'simUploadLimit': 2,
        'sizeLimit': 4000000,
        'multi': true,
        'auto': true,
        'onComplete': function (event, queueID, fileObj, response, data) {
            $("#Original").append('<img src="' + response + '"/>')

        },

        'onError': function (event, ID, fileObj, errorObj) {
            alert(errorObj.type + ' Error: ' + errorObj.info);
        }


    });
}
);

​

下面是我需要展示的图片：

<div id="Original">

</div>

Answer 1

在这条线上

context.Response.Write((tempPath & "/") + filename)

您引用的是主文件夹，请尝试执行以下操作：

context.Response.Write((tempPath & "/thumbs/") + filename)

至于灯箱效果，你可以使用像jQuery Lightbox这样的jQuery插件

如果插件需要这两个文件的路径，您还可以在处理程序中创建图像标记并将其作为响应发送。然后，您可以将完整的响应附加到“原始”div。

编辑：

而不是写：

context.Response.Write((tempPath & "/thumbs/") + filename)

你可以这样写：

context.Response.Write("<a href='"+(tempPath & "/") + filename+"'><img src='"+(tempPath & "/thumbs/") + filename +"'/></a>")

在你的脚本中：

$("#Original").append(response)

它会将你的缩略图链接到你的图片上。最后，你需要使用Lightbox插件调用它的方法

$("#Original a").lightBox({fixedNavigation:true});

这将创建灯箱效果。