Question

我已经使用uploadify上传了一些图片并将原始文件保存在“uploads”文件夹中，缩略图保存在“uploads \ _”文件夹中，现在我需要的是我在main.aspx页面上有一个div元素，我需要在其中显示缩略图。单击缩略图后，我需要给它一个灯箱效果。

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

2.使用Lightbox效果时，如何使用以下代码管理我的两个Imagess。

这是我的处理程序代码：

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插件，如jQuery Lightbox

如果插件需要两个文件的路径，您还可以在处理程序中创建图像标记并作为响应发送。然后，您可以将完整的回复附加到“原始”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});

将创建灯箱效果。

Answer 2

也许你可以像pathToFile;pathToThumb和JavaScript split()那样做出回应，你可以把正确的路径放在正确的位置。

修改

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

在这一行中你应该添加拇指路径，即

  context.Response.Write((tempPath & "/") + filename + ";" + savepath +"\thumbs"  & "\" + "t_" + filename);

然后，当你在javascript中得到它时，你需要做：

var paths = response.split(";");

//   paths[0]; path to file
//   paths[1]; path to thumb

所以这些可以与灯箱或其他任何东西一起使用。

...抱歉，我比cb更喜欢......

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

2 个答案: