Praca z plikami w witrynie ASP.NET Web Pages (Razor)

Autor: Tom FitzMacken

W tym artykule wyjaśniono, jak odczytywać, zapisywać, dołączać, usuwać i przekazywać pliki w witrynie ASP.NET Web Pages (Razor).

Uwaga / Notatka

Jeśli chcesz przesyłać obrazy i nimi manipulować (na przykład obrócić lub zmienić ich rozmiar), zobacz Praca z obrazami w środowisku ASP.NET Web Pages.

Czego nauczysz się:

  • Jak utworzyć plik tekstowy i zapisać w nim dane.
  • Jak dołączyć dane do istniejącego pliku.
  • Jak odczytać plik i wyświetlić go.
  • Jak usunąć pliki z witryny internetowej.
  • Jak umożliwić użytkownikom przekazywanie jednego pliku lub wielu plików.

Oto funkcje programowania ASP.NET wprowadzone w artykule:

  • Obiekt File , który umożliwia zarządzanie plikami.
  • Pomocnik FileUpload .
  • Path Obiekt, który udostępnia metody, które umożliwiają manipulowanie ścieżkami i nazwami plików.

Wersje oprogramowania używane w samouczku

  • ASP.NET Web Pages (Razor) 2
  • WebMatrix 2

Ten samouczek działa również z programem WebMatrix 3.

Tworzenie pliku tekstowego i zapisywanie w nim danych

Oprócz korzystania z bazy danych w witrynie internetowej możesz pracować z plikami. Możesz na przykład użyć plików tekstowych jako prostego sposobu przechowywania danych dla witryny. (Plik tekstowy używany do przechowywania danych jest czasami nazywany plikiem prostym). Pliki tekstowe mogą być w różnych formatach, takich jak .txt, .xmllub .csv (wartości rozdzielane przecinkami).

Jeśli chcesz przechowywać dane w pliku tekstowym, możesz użyć File.WriteAllText metody , aby określić plik do utworzenia i dane do zapisania w nim. W tej procedurze utworzysz stronę zawierającą prosty formularz z trzema input elementami (imię, nazwisko i adres e-mail) oraz przycisk Prześlij . Gdy użytkownik prześle formularz, zapiszesz dane wejściowe użytkownika w pliku tekstowym.

  1. Utwórz nowy folder o nazwie App_Data, jeśli jeszcze nie istnieje.

  2. W katalogu głównym witryny internetowej utwórz nowy plik o nazwie UserData.cshtml.

  3. Zastąp istniejącą zawartość następującymi elementami:

    @{
        var result = "";
        if (IsPost)
        {
            var firstName = Request["FirstName"];
            var lastName = Request["LastName"];
            var email = Request["Email"];
    
            var userData = firstName + "," + lastName +
                "," + email + Environment.NewLine;
    
            var dataFile = Server.MapPath("~/App_Data/data.txt");
            File.WriteAllText(@dataFile, userData);
            result = "Information saved.";
        }
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>Write Data to a File</title>
    </head>
    <body>
        <form id="form1" method="post">
        <div>
            <table>
                <tr>
                    <td>First Name:</td>
                    <td><input id="FirstName" name="FirstName" type="text" /></td>
    
                </tr>
                <tr>
                    <td>Last Name:</td>
                    <td><input id="LastName" name="LastName" type="text" /></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input id="Email" name="Email" type="text" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Submit"/></td>
                </tr>
            </table>
        </div>
        <div>
        @if(result != ""){
            <p>Result: @result</p>
        }
        </div>
        </form>
    </body>
    </html>
    

    Znacznik HTML tworzy formularz z trzema polami tekstowymi. W kodzie użyjesz IsPost właściwości , aby określić, czy strona została przesłana przed rozpoczęciem przetwarzania.

    Pierwszym zadaniem jest pobranie danych wejściowych użytkownika i przypisanie go do zmiennych. Następnie kod łączy wartości oddzielnych zmiennych w jeden ciąg rozdzielany przecinkami, który jest następnie przechowywany w innej zmiennej. Zwróć uwagę, że separator przecinków jest ciągiem zawartym w cudzysłowie (","), ponieważ dosłownie osadzasz przecinek w tworzonym wielkim ciągu. Na końcu połączonych ze sobą danych należy dodać element Environment.NewLine. Spowoduje to dodanie podziału wiersza (znak nowego wiersza). To, co tworzysz poprzez całe to łączenie, to ciąg, który wygląda następująco:

    David,Jones,davidj@contoso.com
    

    Z niewidoczną przerwą na końcu linii.

    Następnie utworzysz zmienną (dataFile), która zawiera lokalizację i nazwę pliku do przechowywania danych. Ustawienie lokalizacji wymaga specjalnej obsługi. W witrynach internetowych niewłaściwe rozwiązanie jest odwoływanie się w kodzie do ścieżek bezwzględnych, takich jak C:\Folder\File.txt dla plików na serwerze internetowym. Jeśli witryna internetowa zostanie przeniesiona, ścieżka bezwzględna będzie błędna. Ponadto w przypadku witryny hostowanej (w przeciwieństwie do komputera) zwykle nie wiesz nawet, jaka jest poprawna ścieżka podczas pisania kodu.

    Ale czasami (tak jak teraz, do pisania pliku) potrzebujesz pełnej ścieżki. Rozwiązaniem jest użycie MapPath metody Server obiektu . Zwraca pełną ścieżkę do Twojej witryny. Aby uzyskać ścieżkę do katalogu głównego witryny internetowej, należy użyć operatora ~ (aby reprezentować wirtualny katalog główny witryny) do MapPath. (Możesz również przekazać do niej nazwę podfolderu, taką jak ~/App_Data/, aby uzyskać ścieżkę dla tego podfolderu). Następnie możesz połączyć dodatkowe informacje na temat tego, co metoda zwraca, aby utworzyć pełną ścieżkę. W tym przykładzie dodasz nazwę pliku. (Więcej informacji na temat pracy ze ścieżkami plików i folderów można uzyskać w temacie Wprowadzenie do programowania ASP.NET stron internetowych przy użyciu składni Razor).

    Plik jest zapisywany w folderze App_Data . Ten folder jest specjalnym folderem w ASP.NET używanym do przechowywania plików danych, zgodnie z opisem w temacie Wprowadzenie do pracy z bazą danych w witrynach ASP.NET Web Pages.

    Metoda WriteAllTextFile obiektu zapisuje dane w pliku. Ta metoda przyjmuje dwa parametry: nazwę (ze ścieżką) pliku do zapisu i rzeczywiste dane do zapisu. Zwróć uwagę, że nazwa pierwszego parametru ma @ znak jako prefiks. Informuje to ASP.NET, że udostępniasz literał ciągu dosłownego, a znaki takie jak "/" nie powinny być interpretowane w specjalny sposób. (Aby uzyskać więcej informacji, zobacz Wprowadzenie do ASP.NET programowania internetowego przy użyciu składni Razor).

    Uwaga / Notatka

    Aby kod zapisywał pliki w folderze App_Data , aplikacja musi mieć uprawnienia do odczytu i zapisu dla tego folderu. Na komputerze dewelopera zwykle nie jest to problem. Jednak podczas publikowania witryny na serwerze internetowym dostawcy hostingu może być konieczne jawne ustawienie tych uprawnień. Jeśli uruchomisz ten kod na serwerze dostawcy hostingu i wystąpią błędy, zapoznaj się z dostawcą hostingu, aby dowiedzieć się, jak ustawić te uprawnienia.

  • Uruchom stronę w przeglądarce.

    Zrzut ekranu przedstawiający okno przeglądarki z polami tekstowymi Imię, Nazwisko i Wiadomość e-mail z przyciskiem Prześlij po nich.

  • Wprowadź wartości w polach, a następnie kliknij pozycję Prześlij.

  • Zamknij okno przeglądarki.

  • Wróć do projektu i odśwież widok.

  • Otwórz plik data.txt . Dane przesłane w formularzu są w pliku.

    Zrzut ekranu przedstawiający plik data dot t x t pokazujący dane wprowadzone w polach przeglądarki internetowej został zarejestrowany w pliku t x t.

  • Zamknij plik data.txt .

Dołączanie danych do istniejącego pliku

W poprzednim przykładzie użyto polecenia WriteAllText do utworzenia pliku tekstowego, który zawiera tylko jeden fragment danych. Jeśli ponownie wywołasz metodę i przekażesz tę samą nazwę pliku, istniejący plik zostanie całkowicie zastąpiony. Jednak po utworzeniu pliku często chcesz dodać nowe dane na końcu pliku. Można to zrobić przy użyciu AppendAllText metody File obiektu.

  1. W witrynie internetowej utwórz kopię pliku UserData.cshtml i nadaj jej nazwę copy UserDataMultiple.cshtml.

  2. Zastąp blok kodu przed tagiem otwierania <!DOCTYPE html> następującym blokiem kodu:

    @{
        var result = "";
        if (IsPost)
        {
            var firstName = Request["FirstName"];
            var lastName = Request["LastName"];
            var email = Request["Email"];
    
            var userData = firstName + "," + lastName +
                "," + email + Environment.NewLine;
    
            var dataFile = Server.MapPath("~/App_Data/data.txt");
            File.AppendAllText (@dataFile, userData);
            result = "Information saved.";
        }
    }
    

    Ten kod ma jedną zmianę z poprzedniego przykładu. Zamiast używać WriteAllTextmetody , używa the AppendAllText metody . Metody są podobne, z tą różnicą, że AppendAllText dodaje dane na końcu pliku. Podobnie jak w przypadku WriteAllText, AppendAllText tworzy plik, jeśli jeszcze nie istnieje.

  3. Uruchom stronę w przeglądarce.

  4. Wprowadź wartości pól, a następnie kliknij przycisk Prześlij.

  5. Dodaj więcej danych i ponownie prześlij formularz.

  6. Wróć do projektu, kliknij prawym przyciskiem myszy folder projektu, a następnie kliknij polecenie Odśwież.

  7. Otwórz plik data.txt . Zawiera teraz nowe wprowadzone dane.

    Zrzut ekranu przedstawiający plik data dot t x t pokazujący dane wprowadzone w polach przeglądarki internetowej został zarejestrowany bez zastępowania poprzednich danych.

Odczytywanie i wyświetlanie danych z pliku

Nawet jeśli nie musisz zapisywać danych w pliku tekstowym, prawdopodobnie czasami trzeba będzie odczytywać dane z jednego pliku. W tym celu można ponownie użyć File obiektu . Za pomocą File obiektu można odczytywać poszczególne wiersze indywidualnie (oddzielone podziałami wierszy) lub odczytywać poszczególne elementy bez względu na sposób ich oddzielania.

Ta procedura pokazuje, jak odczytywać i wyświetlać dane utworzone w poprzednim przykładzie.

  1. W katalogu głównym witryny internetowej utwórz nowy plik o nazwie DisplayData.cshtml.

  2. Zastąp istniejącą zawartość następującymi elementami:

    @{
        var result = "";
        Array userData = null;
        char[] delimiterChar = {','};
    
        var dataFile = Server.MapPath("~/App_Data/data.txt");
    
        if (File.Exists(dataFile)) {
            userData = File.ReadAllLines(dataFile);
            if (userData == null) {
                // Empty file.
                result = "The file is empty.";
            }
        }
        else {
            // File does not exist.
            result = "The file does not exist.";
        }
    }
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Reading Data from a File</title>
    </head>
    <body>
        <div>
            <h1>Reading Data from a File</h1>
            @result
            @if (result == "") {
                <ol>
                @foreach (string dataLine in userData) {
                <li>
                    User
                    <ul>
                    @foreach (string dataItem in dataLine.Split(delimiterChar)) {
                        <li>@dataItem</li >
                    }
                    </ul>
                </li>
                }
                </ol>
            }
        </div>
    </body>
    </html>
    

    Kod rozpoczyna się od odczytania pliku utworzonego w poprzednim przykładzie do zmiennej o nazwie userData, przy użyciu tego wywołania metody:

    File.ReadAllLines(dataFile)
    

    Kod, który należy wykonać, znajduje się wewnątrz instrukcji if . Jeśli chcesz odczytać plik, dobrym pomysłem jest użycie File.Exists metody w celu określenia, czy plik jest dostępny. Kod sprawdza również, czy plik jest pusty.

    Treść strony zawiera dwie foreach pętle, jedno zagnieżdżone wewnątrz drugiej. Pętla zewnętrzna foreach pobiera jeden wiersz jednocześnie z pliku danych. W takim przypadku wiersze są definiowane przez podziały wierszy w pliku — czyli każdy element danych znajduje się we własnym wierszu. Pętla zewnętrzna tworzy nowy element (<li>) wewnątrz uporządkowanej listy (<ol>).

    Pętla wewnętrzna dzieli poszczególne wiersze danych na elementy (pola) przy użyciu przecinka jako ogranicznika. (Na podstawie poprzedniego przykładu oznacza to, że każdy wiersz zawiera trzy pola — imię, nazwisko i adres e-mail rozdzielone przecinkami). Pętla wewnętrzna tworzy <ul> również listę i wyświetla jeden element listy dla każdego pola w wierszu danych.

    Kod ilustruje sposób użycia dwóch typów danych, tablicy i char typu danych. Tablica File.ReadAllLines jest wymagana, ponieważ metoda zwraca dane jako tablicę. Typ danych char jest wymagany, ponieważ metoda Split zwraca array, w którym każdy element ma typ char. (Aby uzyskać informacje o tablicach, zobacz Wprowadzenie do ASP.NET programowania internetowego przy użyciu składni Razor).

  3. Uruchom stronę w przeglądarce. Zostaną wyświetlone dane wprowadzone dla poprzednich przykładów.

    Zrzut ekranu przedstawiający okno przeglądarki przedstawiające dane z danych z pliku dot t x t w tablicy.

Wskazówka

Wyświetlanie danych z pliku oddzielonego przecinkami programu Microsoft Excel

Program Microsoft Excel umożliwia zapisywanie danych zawartych w arkuszu kalkulacyjnym jako pliku rozdzielanego przecinkami (.csv pliku). Gdy to zrobisz, plik jest zapisywany w postaci zwykłego tekstu, a nie w formacie programu Excel. Każdy wiersz w arkuszu kalkulacyjnym jest oddzielony podziałem wiersza w pliku tekstowym, a każdy element danych jest oddzielony przecinkiem. Możesz użyć kodu pokazanego w poprzednim przykładzie, aby odczytać plik rozdzielany przecinkami programu Excel, zmieniając tylko nazwę pliku danych w kodzie.

Usuwanie plików

Aby usunąć pliki z witryny internetowej, możesz użyć File.Delete metody . Ta procedura pokazuje, jak umożliwić użytkownikom usunięcie obrazu (.jpg pliku) z folderu images , jeśli znają nazwę pliku.

Uwaga / Notatka

Ważne W produkcyjnej witrynie internetowej zazwyczaj ograniczasz, kto może wprowadzać zmiany w danych. Aby uzyskać informacje o sposobie konfigurowania członkostwa oraz sposobach autoryzacji użytkowników do wykonywania zadań w witrynie, zobacz Dodawanie zabezpieczeń i członkostwa do witryny ASP.NET Web Pages.

  1. W witrynie internetowej utwórz podfolder o nazwie images.

  2. Skopiuj co najmniej jeden plik .jpg do folderu images.

  3. W katalogu głównym witryny internetowej utwórz nowy plik o nazwie FileDelete.cshtml.

  4. Zastąp istniejącą zawartość następującymi elementami:

    @{
        bool deleteSuccess = false;
        var photoName = "";
        if (IsPost) {
            photoName = Request["photoFileName"] + ".jpg";
            var fullPath = Server.MapPath("~/images/" + photoName);
    
            if (File.Exists(fullPath))
            {
                    File.Delete(fullPath);
                    deleteSuccess = true;
            }
        }
    }
    <!DOCTYPE html>
    <html>
      <head>
        <title>Delete a Photo</title>
      </head>
      <body>
        <h1>Delete a Photo from the Site</h1>
        <form name="deletePhoto" action="" method="post">
          <p>File name of image to delete (without .jpg extension):
          <input name="photoFileName" type="text" value="" />
          </p>
          <p><input type="submit" value="Submit" /></p>
        </form>
    
        @if(deleteSuccess) {
            <p>
            @photoName deleted!
            </p>
            }
      </body>
    </html>
    

    Ta strona zawiera formularz, w którym użytkownicy mogą wprowadzać nazwę pliku obrazu. Nie wprowadzają rozszerzenia .jpg do nazwy pliku; ograniczając w ten sposób nazwę pliku, możesz zapobiec przypadkowemu usuwaniu dowolnych plików przez użytkowników w witrynie.

    Kod odczytuje nazwę pliku wprowadzonego przez użytkownika, a następnie tworzy pełną ścieżkę. Aby utworzyć ścieżkę, kod używa bieżącej ścieżki witryny internetowej (zwracanej przez Server.MapPath metodę), nazwy folderu images , nazwy podanej przez użytkownika i ".jpg" jako ciągu literału.

    Aby usunąć plik, kod wywołuje metodę File.Delete , przekazując pełną ścieżkę, którą właśnie skonstruujesz. Na końcu znaczników kod wyświetla komunikat potwierdzający, że plik został usunięty.

  5. Uruchom stronę w przeglądarce.

    Zrzut ekranu przedstawiający okno przeglądarki z polem Usuń zdjęcie ze strony Witryny z polem nazwy pliku i przyciskiem Prześlij.

  6. Wprowadź nazwę pliku do usunięcia, a następnie kliknij przycisk Prześlij. Jeśli plik został usunięty, nazwa pliku jest wyświetlana w dolnej części strony.

Zezwalanie użytkownikom na przekazywanie pliku

Pomocnik FileUpload umożliwia użytkownikom przekazywanie plików do witryny internetowej. Poniższa procedura pokazuje, jak umożliwić użytkownikom przekazywanie pojedynczego pliku.

  1. Dodaj bibliotekę pomocników sieci Web ASP.NET do witryny sieci Web zgodnie z opisem w temacie Instalowanie pomocników w witrynie ASP.NET stron sieci Web, jeśli nie została ona wcześniej dodana.

  2. W folderze App_Data utwórz nowy folder i nadaj mu nazwę UploadedFiles.

  3. W katalogu głównym utwórz nowy plik o nazwie FileUpload.cshtml.

  4. Zastąp istniejącą zawartość na stronie następującymi elementami:

    @using Microsoft.Web.Helpers;
    @{
        var fileName = "";
        if (IsPost) {
            var fileSavePath = "";
            var uploadedFile = Request.Files[0];
            fileName = Path.GetFileName(uploadedFile.FileName);
            fileSavePath = Server.MapPath("~/App_Data/UploadedFiles/" +
              fileName);
            uploadedFile.SaveAs(fileSavePath);
        }
    }
    <!DOCTYPE html>
    <html>
        <head>
        <title>FileUpload - Single-File Example</title>
        </head>
        <body>
        <h1>FileUpload - Single-File Example</h1>
        @FileUpload.GetHtml(
            initialNumberOfFiles:1,
            allowMoreFilesToBeAdded:false,
            includeFormTag:true,
            uploadText:"Upload")
        @if (IsPost) {
            <span>File uploaded!</span><br/>
        }
        </body>
    </html>
    

    Główna część strony wykorzystuje FileUpload pomocnika do stworzenia okna przesyłania oraz przycisków, które prawdopodobnie znasz.

    Zrzut ekranu strony przeglądarki internetowej z przekazywaniem plików pokazujący selektor plików pomocnika przekazywania plików i przycisk Przekaż.

    Właściwości ustawione dla FileUpload pomocnika określają, że chcesz mieć jedno pole do przesyłania pliku i że chcesz, aby na przycisku przesyłania widniało Prześlij. (W dalszej części artykułu dodasz więcej pól).

    Gdy użytkownik kliknie pozycję Przekaż, kod w górnej części strony pobierze plik i zapisze go. Obiekt Request , którego zwykle używasz do pobierania wartości z pól formularza, zawiera również tablicę zawierającą Files przekazany plik (lub pliki). Poszczególne pliki można pobrać z określonych pozycji w tablicy — na przykład, aby uzyskać pierwszy przekazany plik, użyj Request.Files[0], aby uzyskać drugi plik, użyj Request.Files[1], i tak dalej. (Pamiętaj, że w programowaniu liczenie zwykle zaczyna się od zera).

    Podczas pobierania przekazanego pliku należy umieścić go w zmiennej (tutaj, uploadedFile), aby można było nią manipulować. Aby określić nazwę przekazanego pliku, wystarczy pobrać jego FileName właściwość. Jednak gdy użytkownik przekaże plik, FileName zawiera oryginalną nazwę użytkownika, która zawiera całą ścieżkę. Może to wyglądać następująco:

    C:\Users\Public\Sample.txt

    Nie chcesz jednak wszystkich tych informacji o ścieżce, ponieważ jest to ścieżka na komputerze użytkownika, a nie dla serwera. Potrzebujesz tylko rzeczywistej nazwy pliku (Sample.txt). Możesz usunąć tylko plik ze ścieżki przy użyciu Path.GetFileName metody , w następujący sposób:

    Path.GetFileName(uploadedFile.FileName)
    

    Obiekt Path jest narzędziem, które ma wiele metod, takich jak ta, których można użyć do usuwania ścieżek, łączenia ścieżek itd.

    Po uzyskaniu nazwy przekazanego pliku możesz utworzyć nową ścieżkę do miejsca przechowywania przekazanego pliku w witrynie internetowej. W takim przypadku połączysz Server.MapPathnazwy folderów (App_Data/UploadedFiles) i nowo rozbieraną nazwę pliku, aby utworzyć nową ścieżkę. Następnie możesz wywołać metodę przesłanego pliku SaveAs, aby zapisać plik.

  5. Uruchom stronę w przeglądarce.

    Zrzut ekranu przedstawiający stronę przeglądarki internetowej z przykładem przesyłania pojedynczego pliku, pokazujący selektor plików i przycisk Przekaż.

  6. Kliknij przycisk Przeglądaj , a następnie wybierz plik do przekazania.

    Zrzut ekranu z okna Eksploratora plików pokazujący plik zaznaczony i wyróżniony na niebiesko oraz przycisk Otwórz wyróżniony w niebieskim prostokącie.

    Pole tekstowe obok przycisku Przeglądaj będzie zawierać ścieżkę i lokalizację pliku.

    Zrzut ekranu strony przeglądarki internetowej

  7. Kliknij Przekaż.

  8. W witrynie internetowej kliknij prawym przyciskiem myszy folder projektu, a następnie kliknij polecenie Odśwież.

  9. Otwórz folder UploadedFiles . Przesłany plik znajduje się w folderze.

    Zrzut ekranu przedstawiający hierarchię folderów projektu z wyróżnionym plikiem Samples dot t x t w kolorze niebieskim w folderze Przekazane pliki.

Zezwalanie użytkownikom na przekazywanie wielu plików

W poprzednim przykładzie można zezwolić użytkownikom na przekazywanie jednego pliku. Możesz jednak użyć FileUpload pomocnika, aby przekazać więcej niż jeden plik naraz. Jest to przydatne w scenariuszach, takich jak przekazywanie zdjęć, gdzie przekazywanie jednego pliku naraz jest żmudne. (Możesz przeczytać o przekazaniu zdjęć w temacie Praca z obrazami w witrynie ASP.NET Web Pages). W tym przykładzie pokazano, jak umożliwić użytkownikom przekazywanie dwóch jednocześnie, chociaż można użyć tej samej techniki do przekazania więcej niż to.

  1. Dodaj bibliotekę Pomocników ASP.NET dla sieci Web do swojej strony internetowej zgodnie z opisem w temacie Instalowanie pomocników na witrynie ASP.NET Web Pages, jeśli jeszcze tego nie zrobiłeś/zrobiłaś.

  2. Utwórz nową stronę o nazwie FileUploadMultiple.cshtml.

  3. Zastąp istniejącą zawartość na stronie następującymi elementami:

    @using Microsoft.Web.Helpers;
    @{
      var message = "";
      if (IsPost) {
          var fileName = "";
          var fileSavePath = "";
          int numFiles = Request.Files.Count;
          int uploadedCount = 0;
          for(int i =0; i < numFiles; i++) {
              var uploadedFile = Request.Files[i];
              if (uploadedFile.ContentLength > 0) {
                  fileName = Path.GetFileName(uploadedFile.FileName);
                  fileSavePath = Server.MapPath("~/App_Data/UploadedFiles/" +
                    fileName);
                  uploadedFile.SaveAs(fileSavePath);
                  uploadedCount++;
              }
           }
           message = "File upload complete. Total files uploaded: " +
             uploadedCount.ToString();
       }
    }
    <!DOCTYPE html>
    <html>
        <head><title>FileUpload - Multiple File Example</title></head>
    <body>
        <form id="myForm" method="post"
           enctype="multipart/form-data"
           action="">
        <div>
        <h1>File Upload - Multiple-File Example</h1>
        @if (!IsPost) {
            @FileUpload.GetHtml(
                initialNumberOfFiles:2,
                allowMoreFilesToBeAdded:true,
                includeFormTag:true,
                addText:"Add another file",
                uploadText:"Upload")
            }
        <span>@message</span>
        </div>
        </form>
    </body>
    </html>
    

    W tym przykładzie pomocnik FileUpload w treści strony jest skonfigurowany tak, aby umożliwić użytkownikom przekazywanie dwóch plików domyślnie. Ponieważ allowMoreFilesToBeAdded jest ustawione na true, pomocnik renderuje link umożliwiający użytkownikowi dodawanie kolejnych pól do przesyłania.

    Zrzut ekranu strony przeglądarki internetowej z przykładem „Przekazywanie pliku (przykład z wieloma plikami)”, pokazującej dwa selektory plików i przycisk „Prześlij”.

    Aby przetworzyć pliki przekazywane przez użytkownika, kod używa tej samej podstawowej techniki, która była używana w poprzednim przykładzie — pobierz plik z Request.Files , a następnie zapisz go. "Takie jak różne czynności, które należy wykonać, aby uzyskać właściwą nazwę pliku i ścieżkę. Innowacja tym razem polega na tym, że użytkownik może przekazywać wiele plików i nie wiesz, ile." Aby dowiedzieć się, możesz uzyskać polecenie Request.Files.Count.

    Dzięki tej liczbie można wykonać pętlę przez Request.Files, pobrać każdy plik po kolei i go zapisać. Jeśli chcesz powtórzyć pętlę for określoną liczbę razy w kolekcji, możesz to zrobić jak poniżej:

    for(int i =0; i < numFiles; i++) {
        var uploadedFile = Request.Files[i];
        if (uploadedFile.ContentLength > 0) {
            fileName = Path.GetFileName(uploadedFile.FileName);
    
        // etc.
    }
    

    Zmienna i jest tylko tymczasowym licznikiem, który przejdzie od zera do dowolnego ustawionego górnego limitu. W takim przypadku górny limit to liczba plików. Jednak ponieważ licznik zaczyna się od zera, co jest typowe dla scenariuszy zliczania w ASP.NET, górny limit jest w rzeczywistości jeden mniejszy niż liczba plików. (Jeśli zostaną przekazane trzy pliki, liczba wynosi zero do 2).

    Zmienna uploadedCount sumuje wszystkie pliki, które zostały pomyślnie przekazane i zapisane. Ten kod uwzględnia możliwość, że oczekiwany plik nie może być przesłany.

  4. Uruchom stronę w przeglądarce. Przeglądarka wyświetla stronę i jej dwa pola przesyłania.

  5. Wybierz dwa pliki do przekazania.

  6. Kliknij pozycję Dodaj inny plik. Na stronie wyświetla się nowe okno przesyłania.

    Zrzut ekranu strony przeglądarki internetowej z przykładem przesyłania wielu plików, pokazujący dwa selektory plików z wybranymi plikami oraz przyciskiem Prześlij.

  7. Kliknij Przekaż.

  8. W witrynie internetowej kliknij prawym przyciskiem myszy folder projektu, a następnie kliknij polecenie Odśwież.

  9. Otwórz folder UploadedFiles , aby wyświetlić pomyślnie przekazane pliki.

Dodatkowe zasoby

Praca z obrazami w witrynie ASP.NET Web Pages

Eksportowanie do pliku CSV