如何在 ASP.NET 网站上显示来自硬盘驱动器文件夹的图像列表?

Posted

技术标签:

【中文标题】如何在 ASP.NET 网站上显示来自硬盘驱动器文件夹的图像列表?【英文标题】:How do you display a list of images, from a folder on hard drive, on ASP.NET website? 【发布时间】:2011-02-07 10:53:15 【问题描述】:

我正在尝试制作一个简单的照片库网站。使用 ASP.NET 和 C#。 现在我没有设置服务器,但我只是使用 Visual Studio 在您创建网站项目并运行它时启动的开发服务器。

我的硬盘上有一个文件夹,其中包含未知数量的图像。我想编写一段代码来遍历每个图像并将它们添加到默认网页。我已经尝试过这段代码,但它不起作用。我究竟做错了什么?我应该使用 ListView 控件还是 DataView 或类似的东西?我是否需要添加虚拟目录才能访问图像?如果是这样,我该如何在这个测试服务器上做到这一点?

另外,如何设置这些图片的位置和对齐方式? 例如,如何使图片垂直排成一行并以网页为中心?

protected void Page_Load(object sender, EventArgs e)

    string[] filesindirectory = Directory.GetFiles(@"C:\Users\Jordan\Desktop\Web Images");
    int i = 1;
    foreach (string s in filesindirectory)
    
        Image img = new Image();
        img.ID = "image" + i.ToString();
        img.ImageUrl = s;
        img.Visible = true;
        Page.Controls.Add(img);
        i++;

    


【问题讨论】:

【参考方案1】:

首先,您需要将要显示的图像放在网络树下。假设您已经这样做了,并且它们位于名为 Images 的文件夹中。然后,您可以使用 Repeater 控件通过数据绑定来显示它们,如下所示:

这样的……

<asp:Repeater ID="RepeaterImages" runat="server">
    <ItemTemplate>
        <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' />
    </ItemTemplate>
</asp:Repeater>

然后在你的代码后面:

protected void Page_Load(object sender, EventArgs e)

    string[] filesindirectory = Directory.GetFiles(Server.MapPath("~/Images"));
    List<String> images = new List<string>(filesindirectory.Count());

    foreach (string item in filesindirectory)
    
        images.Add(String.Format("~/Images/0", System.IO.Path.GetFileName(item)));
    

    RepeaterImages.DataSource = images;
    RepeaterImages.DataBind();

这基本上创建了一个包含目录完整路径的图像数组。 然后它创建一个包含图像虚拟路径的字符串列表。 然后它将该列表绑定到转发器,该转发器显示其模板中的每个项目,这是一个使用路径作为 ImageUrl 的 Image 控件。它很快,但很有效,应该是一个很好的起点。

【讨论】:

谢谢丹,这很好用。另一个问题...如何使图像全部垂直显示在一条线上并以网页为中心?并且可以缩放图像吗? 为了对齐图像使用一些 CSS - 也许将每个图像包装在一个 div 中。您可以通过在图像控件上指定宽度和高度来使用“浏览器缩放”,但这只会缩放浏览器中的图像。要以编程方式实际缩放图像,请查看west-wind.com/Weblog/posts/283.aspx【参考方案2】:

您正在创建一个 URL 为 C:\Users\Jordan\Desktop\Web Images\SomeImage.jpg&lt;img&gt; 元素。显然,这在网络浏览器中是行不通的。

您应该将图像复制到项目的子文件夹,并将 URL 设置为相对 URL,如下所示:

img.ImageUrl = "~/Web Images/" + Path.GetFileName(s);

(假设Web Images文件夹是应用根目录的子文件夹)

【讨论】:

【参考方案3】:

例如

您需要有一种方法来指定您的图像将在您的应用中存储的位置。 因此,您需要一个包含路径的 Web 配置文件。 或者,如果您想真正发挥创造力,可以将其存储在数据库中....

在您的网页中

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Images.aspx.cs" Inherits="ImageViewer" %>


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Viewer Demo</title>
        <link href='styles.css' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="outer">
                <h2>Viewer Demo</h2>
                <br />            
                <div style="clear:both;">
                    <h4>Using Viewer with the Repeater Control</h4>
                    <p>Repeater control to display a collection of images.</p>
                </div>
                <div style="clear:both;">
                <asp:Repeater ID="RepeaterImages" runat="server">
                    <ItemTemplate>
                        <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' />
                    </ItemTemplate>
                </asp:Repeater>
                </div>                
                <br />    
            </div>
        </form>
    </body>
    </html>

在您的 web.config 中

    <appSettings>
        <add key="FilePath" value="~/images"/>
    </appSettings>

在您的 .cs 文件后面的代码中 你真的需要过滤文件,如果有人(也许你;))放置错误的文件 在其中,您不会无意中包含它们...

    string filters = "*.jpg;*.png;*.gif";
    string Path = ConfigurationManager.AppSettings["FilePath"].ToString();

    List<String> images = new List<string>();

    foreach (string filter in filters.Split(';'))
    
        FileInfo[] fit = new DirectoryInfo(this.Server.MapPath(Path)).GetFiles(filter);
        foreach (FileInfo fi in fit)
        
            images.Add(String.Format(Path + "/0", fi));                 
        
    

    RepeaterImages.DataSource = images;
    RepeaterImages.DataBind();

【讨论】:

非常感谢您帮助我,我只是添加大小并使其居中

以上是关于如何在 ASP.NET 网站上显示来自硬盘驱动器文件夹的图像列表?的主要内容,如果未能解决你的问题,请参考以下文章

如何在我的 asp.net 网站上显示特定城市的天气温度?

如何在 asp.net core .NET6(Razor 页面)中的单个 cshtml 中显示来自多个表/模型的数据

如何使用 SVN 推出 ASP.NET 网站?

asp.net core 2 从本地磁盘驱动器加载和显示图像

如何将c#做好的asp.net网站部署到iis上

如何在 ASP.NET 中显示来自 C# 的警告框?