Udostępnij za pośrednictwem


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

Jeśli chcesz przekazać obrazy i manipulować nimi (na przykład przerzucać je lub zmieniać ich rozmiar), zobacz Praca z obrazami w witrynie stron sieci Web ASP.NET.

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 ASP.NET funkcje programowania wprowadzone w artykule:

  • Obiekt File , który umożliwia zarządzanie plikami.
  • Pomocnik FileUpload .
  • Obiekt Path , który udostępnia metody, które umożliwiają manipulowanie ścieżką 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 do niego danych

Oprócz korzystania z bazy danych w witrynie internetowej możesz pracować z plikami. Na przykład możesz użyć plików tekstowych jako prostego sposobu przechowywania danych dla witryny. (Plik tekstowy używany do przechowywania danych jest czasami nazywany plikiem płaskim). 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 przecinka jest ciągiem zawartym w cudzysłowie (","), ponieważ dosłownie osadzasz przecinek w tworzonym wielkim ciągu. Na końcu połączonych danych należy dodać element Environment.NewLine. Spowoduje to dodanie podziału wiersza (nowego znaku wiersza). To, co tworzysz przy użyciu całej tej łączenia, to ciąg, który wygląda następująco:

    David,Jones,davidj@contoso.com
    

    (Z niewidocznym podziałem linii na końcu).

    Następnie należy utworzyć zmienną (dataFile), która zawiera lokalizację i nazwę pliku do przechowywania danych. Ustawienie lokalizacji wymaga specjalnej obsługi. W witrynach internetowych jest to złe rozwiązanie, aby odwoływać 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 nieprawidłowa. Ponadto w przypadku hostowanej witryny (zamiast na komputerze własnym) 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. Spowoduje to zwrócenie pełnej ścieżki do witryny internetowej. Aby uzyskać ścieżkę katalogu głównego witryny sieci Web, użytkownik jest operatorem ~ (aby odtworzyć wirtualny katalog główny witryny) do MapPath. (Możesz również przekazać do niego nazwę podfolderu, na przykład ~/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 dowiedzieć się w temacie Wprowadzenie do ASP.NET programowania 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 stron sieci Web ASP.NET.

    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

    Aby kod zapisywał pliki w folderze App_Data , aplikacja musi mieć uprawnienia do odczytu i zapisu dla tego folderu. Na komputerze dewelopera zazwyczaj nie jest to problem. Jednak po opublikowaniu witryny na serwerze sieci Web 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 Email z przyciskiem Prześlij.

  • Wprowadź wartości w polach, a następnie kliknij przycisk 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 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 kopii nazwę UserDataMultiple.cshtml.

  2. Zastąp blok kodu przed tagiem otwarcia <!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ę w nim z poprzedniego przykładu. Zamiast używać metody WriteAllText, używa the AppendAllText metody . Metody są podobne, z wyjątkiem dodawania AppendAllText danych na końcu pliku. Podobnie jak w przypadku WriteAllTextpolecenia , 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 niezależnie od sposobu ich oddzielenia.

Ta procedura przedstawia sposób odczytywania i wyświetlania danych utworzonych 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: jedną zagnieżdżona wewnątrz drugiej. Pętla zewnętrzna foreach pobiera jeden wiersz jednocześnie z pliku danych. W tym 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> element) wewnątrz uporządkowanej listy (<ol> element).

    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, każdy oddzielony 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żywania dwóch typów danych, tablicy i char typu danych. Tablica jest wymagana File.ReadAllLines , ponieważ metoda zwraca dane jako tablicę. Typ char danych jest wymagany, ponieważ Split metoda zwraca wartość array , w której każdy element jest typu char. (Aby uzyskać informacje o tablicach, zobacz Introduction to ASP.NET Web Programming Using the Razor Syntax (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 z danymi z pliku dot t x t w tablicy.

Porada

Wyświetlanie danych z pliku Comma-Delimited programu Microsoft Excel

Program Microsoft Excel umożliwia zapisanie 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 programu Excel rozdzielany przecinkami, zmieniając 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

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

  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ącym kodem:

    @{
        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 nazwy pliku .jpg ; Ograniczając taką nazwę pliku, możesz uniemożliwić użytkownikom usuwanie dowolnych plikó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 jej pełną ścieżkę, którą właśnie utworzono. Na końcu znaczników kod wyświetla komunikat potwierdzający usunięcie pliku.

  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 stron sieci Web ASP.NET, jeśli nie dodano jej wcześniej.

  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>
    

    Treść strony używa FileUpload pomocnika do utworzenia pola przekazywania i przycisków, które prawdopodobnie znasz:

    Zrzut ekranu przedstawiający stronę przeglądarki internetowej Przekazywania plików z selektorem plików przekazywania plików i przyciskiem Przekaż.

    Właściwości ustawione dla FileUpload pomocnika określają, że chcesz przekazać plik w jednym polu i chcesz, aby przycisk przesyłania był odczytywany do odczytu Przekaż. (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, ma również tablicę zawierającą Files przekazany plik (lub pliki). Możesz pobrać poszczególne pliki z określonych pozycji w tablicy — na przykład, aby uzyskać pierwszy przekazany plik, uzyskasz Request.Files[0]polecenie , aby uzyskać drugi plik, uzyskasz Request.Files[1]i tak dalej. (Pamiętaj, że w programowaniu liczenie zwykle zaczyna się od zera).

    Po pobraniu 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 to, 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 usuniętą nazwę pliku, aby utworzyć nową ścieżkę. Następnie możesz wywołać metodę przekazanego pliku SaveAs , aby rzeczywiście zapisać plik.

  5. Uruchom stronę w przeglądarce.

    Zrzut ekranu przedstawiający stronę przeglądarki internetowej Przekazywanie pojedynczego pliku z selektorem plików i przyciskiem Przekaż.

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

    Zrzut ekranu przedstawiający okno Eksplorator plików z zaznaczonym plikiem i wyróżnionym kolorem niebieskim oraz wyróżnionym przyciskiem Otwórz w niebieskim prostokącie.

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

    Zrzut ekranu przedstawiający stronę przeglądarki sieci Web Przykład przekazywania pojedynczego pliku z wybranym plikiem i przyciskiem Przekaż.

  7. Kliknij pozycję Przekaż.

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

  9. Otwórz folder UploadedFiles . Przekazany 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 do przekazania więcej niż jednego pliku jednocześnie. Jest to przydatne w scenariuszach, takich jak przekazywanie zdjęć, gdzie przekazywanie jednego pliku naraz jest żmudne. (Możesz przeczytać o przekazywaniu 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 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 jeszcze tego nie zrobiono.

  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 FileUpload pomocnik w treści strony jest skonfigurowany tak, aby umożliwić użytkownikom domyślne przekazywanie dwóch plików. Ponieważ allowMoreFilesToBeAdded parametr jest ustawiony na truewartość , pomocnik renderuje link umożliwiający użytkownikowi dodawanie kolejnych pól przekazywania:

    Zrzut ekranu przedstawiający stronę przeglądarki internetowej Przekazywanie pliku z wieloma plikami z dwoma selektorami plików i przyciskiem Przekaż.

    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 pliku, a następnie zapisz go. (W tym 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 znasz wielu. Aby dowiedzieć się, możesz uzyskać .Request.Files.Count

    Dzięki tej liczbie można wykonać pętlę za pomocą Request.Filespolecenia , pobrać każdy plik po kolei i zapisać go. Jeśli chcesz wykonać pętlę znaną liczbę razy w kolekcji, możesz użyć for pętli w następujący sposób:

    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 tym 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 faktycznie 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 odpowiada za możliwość przekazania oczekiwanego pliku.

  4. Uruchom stronę w przeglądarce. W przeglądarce zostanie wyświetlona strona i jej dwa pola przekazywania.

  5. Wybierz dwa pliki do przekazania.

  6. Kliknij pozycję Dodaj kolejny plik. Na stronie zostanie wyświetlone nowe pole przekazywania.

    Zrzut ekranu przedstawiający stronę przeglądarki internetowej Przekaż wiele plików z dwoma selektorami plików z wybranymi plikami i przyciskiem Przekaż.

  7. Kliknij pozycję 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