2010-04-13 12 views
15

Próbuję zrobić prostą stronę galerii zdjęć. Korzystanie z ASP.NET i C#. W tej chwili nie mam serwera skonfigurowanego, ale używam tylko wersji deweloperskiej, która uruchamia się po uruchomieniu projektu witryny sieci Web i uruchomieniu go.Jak wyświetlić listę obrazów z folderu na dysku twardym w witrynie ASP.NET?

Mam folder na dysku twardym, który zawiera nieznaną liczbę zdjęć. Chcę napisać fragment kodu, który przejdzie przez każdy obraz i doda go do domyślnej strony internetowej. Próbowałem tego kodu, ale to nie działa. Co ja robię źle? Czy powinienem używać kontrolki ListView lub DataView lub czegoś podobnego? Czy muszę dodać katalog wirtualny, aby uzyskać dostęp do obrazów? Jeśli tak, to w jaki sposób mogę to zrobić na tym serwerze testowym?

RÓWNIEŻ, jak ustawić położenie i wyrównanie tych zdjęć? Na przykład, w jaki sposób mogę zrobić, aby obrazy były pionowe i wyśrodkowane na stronie internetowej?

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++; 

    } 

} 

Odpowiedz

17

Najpierw należy umieścić obrazy, które mają być wyświetlane w drzewie sieci. Załóżmy, że to zrobiłeś i są w folderze o nazwie Obrazy. Następnie można użyć kontroli Repeater, aby wyświetlić je na podstawie danych wiążących go tak:

coś takiego ...

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

, a następnie w kodzie za:

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(); 
} 

This zasadniczo tworzy szereg obrazów z ich pełną ścieżką z katalogu. Następnie tworzy listę ciągów, które zawierają wirtualną ścieżkę do obrazu. Następnie wiąże tę listę z repeaterem, który wyświetla każdy element w swoim szablonie, który jest formantem Image, który wykorzystuje ścieżkę jako ImageUrl. Jest szybki, ale działa i powinien stanowić dobry punkt wyjścia.

+0

Dzięki Dan, to działa świetnie. Jeszcze jedno pytanie ... Jak mogę sprawić, by obrazy pojawiały się w linii pionowo i wyśrodkowane na stronie? A możliwe jest skalowanie obrazów? – PICyourBrain

+1

Aby wyrównać obrazy, użyj trochę CSS - może zawiń każdy obraz w div. Możesz użyć "skalowania przeglądarki", określając szerokość i wysokość na formancie obrazu, ale spowoduje to tylko skalowanie obrazu w przeglądarce. Aby faktycznie skalować obrazy, programowo zajrzyj do http://www.west-wind.com/Weblog/posts/283.aspx –

3

Ty tworzysz element <img> z URL C:\Users\Jordan\Desktop\Web Images\SomeImage.jpg. Oczywiście to nie zadziała w przeglądarce internetowej.

Należy skopiować obrazy do podfolderu projektu i ustawić adres URL do względnego adresu URL, na przykład:

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

(Zakładając, że folder Web Images jest podfolder korzenia aplikacji)

1

Na przykład

trzeba mieć sposób, aby określić, gdzie swoje obrazy zostaną zapisane w aplikacji. Potrzebny jest zatem plik konfiguracji sieci z zawartą w nim ścieżką. Albo jeśli chcesz być naprawdę twórczy, można przechowywać go w bazie danych ....

Na swojej stronie internetowej

<%@ 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> 

W Twojej web.config

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

i In twój kod za plikiem .cs Naprawdę potrzebujesz filtrować pliki, tak, że jeśli ktoś (może ty;)) umieszcza w nim błędne pliki , to nie przypadkowo je uwzględnisz ...

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(); 
Powiązane problemy