Share via


Arbeiten mit Dateien auf einer ASP.NET Web Pages (Razor)-Website

von Tom FitzMacken

In diesem Artikel wird das Lesen, Schreiben, Anfügen, Löschen und Hochladen von Dateien auf einer ASP.NET Web Pages-Website (Razor) erläutert.

Hinweis

Wenn Sie Bilder hochladen und bearbeiten möchten (z. B. kippen oder ihre Größe ändern), lesen Sie Arbeiten mit Bildern in einer ASP.NET Web Pages Website.

Was Sie lernen werden:

  • Hier erfahren Sie, wie Sie eine Textdatei erstellen und Daten in diese schreiben.
  • Anfügen von Daten an eine vorhandene Datei
  • Hier erfahren Sie, wie Sie eine Datei lesen und daraus anzeigen.
  • So löschen Sie Dateien von einer Website.
  • Hier erfahren Sie, wie Sie Benutzern das Hochladen einer oder mehrerer Dateien ermöglichen.

Dies sind die ASP.NET Programmierfeatures, die im Artikel vorgestellt werden:

  • Das File -Objekt, das eine Möglichkeit zum Verwalten von Dateien bietet.
  • Das FileUpload Hilfsprogramm.
  • Das Path -Objekt, das Methoden bereitstellt, mit denen Sie Pfad- und Dateinamen bearbeiten können.

Im Tutorial verwendete Softwareversionen

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

Dieses Tutorial funktioniert auch mit WebMatrix 3.

Erstellen einer Textdatei und Schreiben von Daten in diese

Zusätzlich zur Verwendung einer Datenbank auf Ihrer Website können Sie auch mit Dateien arbeiten. Beispielsweise können Sie Textdateien als einfache Möglichkeit zum Speichern von Daten für die Website verwenden. (Eine Textdatei, die zum Speichern von Daten verwendet wird, wird manchmal als Flatfile bezeichnet.) Textdateien können in verschiedenen Formaten vorliegen, z. B. .txt, .xmloder .csv (durch Trennzeichen getrennte Werte).

Wenn Sie Daten in einer Textdatei speichern möchten, können Sie die File.WriteAllText -Methode verwenden, um die zu erstellende Datei und die zu schreibenden Daten anzugeben. In diesem Verfahren erstellen Sie eine Seite, die ein einfaches Formular mit drei input Elementen (Vorname, Nachname und E-Mail-Adresse) und einer Schaltfläche Senden enthält. Wenn der Benutzer das Formular übermittelt, speichern Sie die Eingabe des Benutzers in einer Textdatei.

  1. Erstellen Sie einen neuen Ordner mit dem Namen App_Data, falls er noch nicht vorhanden ist.

  2. Erstellen Sie im Stammverzeichnis Ihrer Website eine neue Datei mit dem Namen UserData.cshtml.

  3. Ersetzen Sie den vorhandenen Inhalt durch Folgendes:

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

    Das HTML-Markup erstellt das Formular mit den drei Textfeldern. Im Code verwenden Sie die IsPost -Eigenschaft, um zu bestimmen, ob die Seite übermittelt wurde, bevor Sie mit der Verarbeitung beginnen.

    Die erste Aufgabe besteht darin, die Benutzereingabe abzurufen und variablen zuzuweisen. Der Code verkettet dann die Werte der separaten Variablen in einer durch Trennzeichen getrennten Zeichenfolge, die dann in einer anderen Variablen gespeichert wird. Beachten Sie, dass das Kommatrennzeichen eine Zeichenfolge ist, die in Anführungszeichen (",") enthalten ist, da Sie buchstäblich ein Komma in die große Zeichenfolge einbetten, die Sie erstellen. Am Ende der Daten, die Sie miteinander verketten, fügen Sie hinzu Environment.NewLine. Dadurch wird ein Zeilenumbruch (ein Zeilenumbruchzeichen) hinzugefügt. Was Sie mit all dieser Verkettung erstellen, ist eine Zeichenfolge, die wie folgt aussieht:

    David,Jones,davidj@contoso.com
    

    (Mit einem unsichtbaren Zeilenumbruch am Ende.)

    Anschließend erstellen Sie eine Variable (dataFile), die den Speicherort und den Namen der Datei enthält, in der die Daten gespeichert werden sollen. Das Festlegen des Standorts erfordert eine spezielle Handhabung. Auf Websites ist es eine schlechte Methode, im Code auf absolute Pfade wie C:\Folder\File.txt für Dateien auf dem Webserver zu verweisen. Wenn eine Website verschoben wird, ist ein absoluter Pfad falsch. Darüber hinaus wissen Sie für eine gehostete Website (im Gegensatz zu ihrem eigenen Computer) in der Regel nicht einmal, was der richtige Pfad ist, wenn Sie den Code schreiben.

    Aber manchmal (wie jetzt, zum Schreiben einer Datei) benötigen Sie einen vollständigen Pfad. Die Lösung besteht darin, die MapPath -Methode des Server -Objekts zu verwenden. Dadurch wird der vollständige Pfad zu Ihrer Website zurückgegeben. Um den Pfad für den Websitestamm abzurufen, verwenden Sie den ~ Operator (um den virtuellen Stamm der Website erneut zu verwenden) in MapPath. (Sie können auch einen Unterordnernamen wie ~/App_Data/übergeben, um den Pfad für diesen Unterordner abzurufen.) Sie können dann zusätzliche Informationen mit dem verketten, was die Methode zurückgibt, um einen vollständigen Pfad zu erstellen. In diesem Beispiel fügen Sie einen Dateinamen hinzu. (Weitere Informationen zum Arbeiten mit Datei- und Ordnerpfaden finden Sie unter Einführung in ASP.NET Web Pages Programmierung mithilfe der Razor-Syntax.)

    Die Datei wird im Ordner App_Data gespeichert. Dieser Ordner ist ein spezieller Ordner in ASP.NET, der zum Speichern von Datendateien verwendet wird, wie unter Einführung in das Arbeiten mit einer Datenbank in ASP.NET Web Pages Sites beschrieben.

    Die WriteAllText -Methode des File -Objekts schreibt die Daten in die Datei. Diese Methode verwendet zwei Parameter: den Namen (mit Pfad) der Datei, in die geschrieben werden soll, und die tatsächlichen Daten, die geschrieben werden sollen. Beachten Sie, dass der Name des ersten Parameters ein @ Zeichen als Präfix hat. Dies weist ASP.NET darauf hin, dass Sie ein wörtliches Zeichenfolgenliteral bereitstellen und dass Zeichen wie "/" nicht auf besondere Weise interpretiert werden sollten. (Weitere Informationen finden Sie unter Einführung in ASP.NET Webprogrammierung mithilfe der Razor-Syntax.)

    Hinweis

    Damit Ihr Code Dateien im Ordner App_Data speichern kann, benötigt die Anwendung Lese-/Schreibberechtigungen für diesen Ordner. Auf Ihrem Entwicklungscomputer ist dies in der Regel kein Problem. Wenn Sie Ihre Website jedoch auf dem Webserver eines Hostinganbieters veröffentlichen, müssen Sie diese Berechtigungen möglicherweise explizit festlegen. Wenn Sie diesen Code auf dem Server eines Hostinganbieters ausführen und Fehler erhalten, wenden Sie sich an den Hostinganbieter, um zu erfahren, wie diese Berechtigungen festgelegt werden.

  • Führen Sie die Seite in einem Browser aus.

    Screenshot des Browserfensters mit den Feldern Vorname, Nachname und Email Textfelder, auf die eine Schaltfläche

  • Geben Sie Werte in die Felder ein, und klicken Sie dann auf Übermitteln.

  • Schließen Sie den Browser.

  • Kehren Sie zum Projekt zurück, und aktualisieren Sie die Ansicht.

  • Öffnen Sie die dateidata.txt . Die Daten, die Sie im Formular übermittelt haben, befinden sich in der Datei.

    Screenshot der Datei

  • Schließen Sie die dateidata.txt .

Anfügen von Daten an eine vorhandene Datei

Im vorherigen Beispiel haben WriteAllText Sie eine Textdatei erstellt, in der nur ein Datenteil enthalten ist. Wenn Sie die Methode erneut aufrufen und ihr denselben Dateinamen übergeben, wird die vorhandene Datei vollständig überschrieben. Nachdem Sie jedoch eine Datei erstellt haben, möchten Sie häufig neue Daten am Ende der Datei hinzufügen. Dazu können Sie die AppendAllText -Methode des File -Objekts verwenden.

  1. Erstellen Sie auf der Website eine Kopie der Datei UserData.cshtml , und nennen Sie die Kopie UserDataMultiple.cshtml.

  2. Ersetzen Sie den Codeblock vor dem öffnenden <!DOCTYPE html> Tag durch den folgenden Codeblock:

    @{
        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.";
        }
    }
    

    Dieser Code weist eine Änderung gegenüber dem vorherigen Beispiel auf. Anstelle von WriteAllTextwird die -Methode verwendet the AppendAllText . Die Methoden sind ähnlich, mit der Ausnahme, dass AppendAllText die Daten am Ende der Datei hinzugefügt werden. Wie bei WriteAllTextwird AppendAllText die Datei erstellt, wenn sie noch nicht vorhanden ist.

  3. Führen Sie die Seite in einem Browser aus.

  4. Geben Sie Werte für die Felder ein, und klicken Sie dann auf Übermitteln.

  5. Fügen Sie weitere Daten hinzu, und senden Sie das Formular erneut.

  6. Kehren Sie zu Ihrem Projekt zurück, klicken Sie mit der rechten Maustaste auf den Projektordner, und klicken Sie dann auf Aktualisieren.

  7. Öffnen Sie die dateidata.txt . Sie enthält nun die neuen Daten, die Sie gerade eingegeben haben.

    Screenshot der Datei

Lesen und Anzeigen von Daten aus einer Datei

Auch wenn Sie keine Daten in eine Textdatei schreiben müssen, müssen Sie wahrscheinlich manchmal Daten aus einer Datei lesen. Dazu können Sie das File -Objekt erneut verwenden. Sie können das File -Objekt verwenden, um jede Zeile einzeln (durch Zeilenumbrüche getrennt) zu lesen oder um einzelne Elemente zu lesen, unabhängig davon, wie sie getrennt sind.

In diesem Verfahren erfahren Sie, wie Sie die Daten lesen und anzeigen, die Sie im vorherigen Beispiel erstellt haben.

  1. Erstellen Sie im Stammverzeichnis Ihrer Website eine neue Datei mit dem Namen DisplayData.cshtml.

  2. Ersetzen Sie den vorhandenen Inhalt durch Folgendes:

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

    Der Code beginnt mit dem Lesen der Datei, die Sie im vorherigen Beispiel erstellt haben, in eine Variable namens userData, wobei dieser Methodenaufruf verwendet wird:

    File.ReadAllLines(dataFile)
    

    Der hierzu zu verwendende Code befindet sich in einer if -Anweisung. Wenn Sie eine Datei lesen möchten, empfiehlt es sich, zuerst die File.Exists -Methode zu verwenden, um zu ermitteln, ob die Datei verfügbar ist. Der Code überprüft auch, ob die Datei leer ist.

    Der Text der Seite enthält zwei foreach Schleifen, eine in der anderen geschachtelt. Die äußere foreach Schleife ruft jeweils eine Zeile aus der Datendatei ab. In diesem Fall werden die Zeilen durch Zeilenumbrüche in der Datei definiert, d. h. jedes Datenelement befindet sich in einer eigenen Zeile. Die äußere Schleife erstellt ein neues Element (<li> Element) innerhalb einer sortierten Liste (<ol> Element).

    Die innere Schleife teilt jede Datenzeile mithilfe eines Kommas als Trennzeichen in Elemente (Felder). (Basierend auf dem vorherigen Beispiel bedeutet dies, dass jede Zeile drei Felder enthält – Vorname, Nachname und E-Mail-Adresse, die jeweils durch ein Komma getrennt sind.) Die innere Schleife erstellt auch eine <ul> Liste und zeigt ein Listenelement für jedes Feld in der Datenzeile an.

    Der Code veranschaulicht, wie zwei Datentypen verwendet werden: ein Array und den char Datentyp. Das Array ist erforderlich, da die File.ReadAllLines Methode Daten als Array zurückgibt. Der char Datentyp ist erforderlich, da die Split -Methode einen array zurückgibt, in dem jedes Element vom Typ charist. (Informationen zu Arrays finden Sie unter Einführung in ASP.NET Webprogrammierung mithilfe der Razor-Syntax.)

  3. Führen Sie die Seite in einem Browser aus. Die Daten, die Sie für die vorherigen Beispiele eingegeben haben, werden angezeigt.

    Screenshot des Browserfensters mit den Daten aus den Daten aus der daten dot t x t-Datei, die in einem Array angezeigt werden.

Tipp

Anzeigen von Daten aus einer Microsoft Excel-Comma-Delimited-Datei

Sie können Microsoft Excel verwenden, um die in einer Kalkulationstabelle enthaltenen Daten als durch Trennzeichen getrennte Datei (.csv Datei) zu speichern. Wenn Sie dies tun, wird die Datei als Nur-Text und nicht im Excel-Format gespeichert. Jede Zeile in der Tabelle wird durch einen Zeilenumbruch in der Textdatei getrennt, und jedes Datenelement wird durch ein Komma getrennt. Sie können den im vorherigen Beispiel gezeigten Code verwenden, um eine durch Trennzeichen getrennte Excel-Datei zu lesen, indem Sie einfach den Namen der Datendatei im Code ändern.

Löschen von Dateien

Um Dateien von Ihrer Website zu löschen, können Sie die File.Delete -Methode verwenden. In diesem Verfahren wird gezeigt, wie Benutzer ein Bild (.jpg Datei) aus einem Imageordner löschen können, wenn sie den Namen der Datei kennen.

Hinweis

Wichtig In einer Produktionswebsite schränken Sie in der Regel ein, wer Änderungen an den Daten vornehmen darf. Informationen zum Einrichten der Mitgliedschaft und zu Möglichkeiten zum Autorisieren von Benutzern zum Ausführen von Aufgaben auf der Website finden Sie unter Hinzufügen von Sicherheit und Mitgliedschaft zu einer ASP.NET Web Pages Website.

  1. Erstellen Sie auf der Website einen Unterordner namens images.

  2. Kopieren Sie eine oder mehrere .jpg Dateien in den Ordner images .

  3. Erstellen Sie im Stammverzeichnis der Website eine neue Datei mit dem Namen FileDelete.cshtml.

  4. Ersetzen Sie den vorhandenen Inhalt durch Folgendes:

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

    Diese Seite enthält ein Formular, in dem Benutzer den Namen einer Bilddatei eingeben können. Sie geben die .jpg Dateinamenerweiterung nicht ein. Indem Sie den Dateinamen wie folgt einschränken, verhindern Sie, dass Benutzer beliebige Dateien auf Ihrer Website löschen.

    Der Code liest den Dateinamen, den der Benutzer eingegeben hat, und erstellt dann einen vollständigen Pfad. Zum Erstellen des Pfads verwendet der Code den aktuellen Websitepfad (wie von der Server.MapPath -Methode zurückgegeben), den Namen des Images-Ordners , den vom Benutzer bereitgestellten Namen und ".jpg" als Literalzeichenfolge.

    Um die Datei zu löschen, ruft der Code die File.Delete -Methode auf und übergibt ihr den vollständigen Pfad, den Sie gerade erstellt haben. Am Ende des Markups zeigt code eine Bestätigungsmeldung an, dass die Datei gelöscht wurde.

  5. Führen Sie die Seite in einem Browser aus.

    Screenshot des Browserfensters mit der Seite

  6. Geben Sie den Namen der zu löschenden Datei ein, und klicken Sie dann auf Übermitteln. Wenn die Datei gelöscht wurde, wird der Name der Datei unten auf der Seite angezeigt.

Zulassen, dass Benutzer eine Datei hochladen

Mit FileUpload dem Hilfsprogramm können Benutzer Dateien auf Ihre Website hochladen. Das folgende Verfahren zeigt, wie Sie Benutzern das Hochladen einer einzelnen Datei ermöglichen.

  1. Fügen Sie ihrer Website die ASP.NET Webhilfsbibliothek hinzu, wie unter Installieren von Hilfsprogrammen in einer ASP.NET Web Pages-Website beschrieben, sofern Sie sie zuvor nicht hinzugefügt haben.

  2. Erstellen Sie im Ordner App_Data einen neuen Ordner, und nennen Sie ihn UploadedFiles.

  3. Erstellen Sie im Stammverzeichnis eine neue Datei mit dem Namen FileUpload.cshtml.

  4. Ersetzen Sie den vorhandenen Inhalt auf der Seite durch Folgendes:

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

    Der Textteil der Seite verwendet das FileUpload Hilfsprogramm, um das Uploadfeld und die Schaltflächen zu erstellen, mit denen Sie wahrscheinlich vertraut sind:

    Screenshot der Webbrowserseite

    Die Eigenschaften, die Sie für das FileUpload Hilfsprogramm festlegen, geben an, dass ein einzelnes Feld für die Datei hochgeladen werden soll, und dass die Schaltfläche "Senden" den Wert Hochladen haben soll. (Sie fügen später im Artikel weitere Felder hinzu.)

    Wenn der Benutzer auf Hochladen klickt, ruft der Code oben auf der Seite die Datei ab und speichert sie. Das Request Objekt, das Sie normalerweise zum Abrufen von Werten aus Formularfeldern verwenden, verfügt auch über ein Files Array, das die hochgeladene Datei (oder dateien) enthält. Sie können einzelne Dateien aus bestimmten Positionen im Array abrufen, z. B. um die erste hochgeladene Datei abzurufen, sie erhalten Request.Files[0], um die zweite Datei abzurufen, Sie erhalten Request.Files[1]usw. (Denken Sie daran, dass bei der Programmierung das Zählen in der Regel bei Null beginnt.)

    Wenn Sie eine hochgeladene Datei abrufen, fügen Sie sie in eine Variable (hier, ) ein, uploadedFiledamit Sie sie bearbeiten können. Um den Namen der hochgeladenen Datei zu bestimmen, erhalten Sie einfach die - FileName Eigenschaft. Wenn der Benutzer jedoch eine Datei hochlädt, FileName enthält er den ursprünglichen Namen des Benutzers, der den gesamten Pfad enthält. Dies kann etwa so aussehen:

    C:\Users\Public\Sample.txt

    Sie möchten jedoch nicht alle Diese Pfadinformationen, da dies der Pfad auf dem Computer des Benutzers ist, nicht für Ihren Server. Sie möchten nur den tatsächlichen Dateinamen (Sample.txt). Sie können nur die Datei aus einem Pfad entfernen, indem Sie die Path.GetFileName -Methode wie folgt verwenden:

    Path.GetFileName(uploadedFile.FileName)
    

    Das Path -Objekt ist ein Hilfsprogramm mit einer Reihe von Methoden wie dieser, mit denen Sie Pfade entfernen, Pfade kombinieren usw. verwenden können.

    Nachdem Sie den Namen der hochgeladenen Datei erhalten haben, können Sie einen neuen Pfad für den Speicherort der hochgeladenen Datei auf Ihrer Website erstellen. In diesem Fall kombinieren Server.MapPathSie , die Ordnernamen (App_Data/UploadedFiles) und den neu entfernten Dateinamen, um einen neuen Pfad zu erstellen. Sie können dann die -Methode der hochgeladenen Datei SaveAs aufrufen, um die Datei tatsächlich zu speichern.

  5. Führen Sie die Seite in einem Browser aus.

    Screenshot der Webbrowserseite

  6. Klicken Sie auf Durchsuchen , und wählen Sie dann eine Datei zum Hochladen aus.

    Screenshot des fensters Explorer, in dem eine Datei ausgewählt und blau hervorgehoben und die Schaltfläche Öffnen in einem blauen Rechteck hervorgehoben ist.

    Das Textfeld neben der Schaltfläche Durchsuchen enthält den Pfad und den Dateispeicherort.

    Screenshot der Webbrowserseite

  7. Klicken Sie auf Hochladen.

  8. Klicken Sie auf der Website mit der rechten Maustaste auf den Projektordner, und klicken Sie dann auf Aktualisieren.

  9. Öffnen Sie den Ordner UploadedFiles . Die datei, die Sie hochgeladen haben, befindet sich im Ordner.

    Screenshot der Projektordnerhierarchie mit blau hervorgehobener Datei

Zulassen, dass Benutzer mehrere Dateien hochladen

Im vorherigen Beispiel können Benutzer eine Datei hochladen. Sie können das FileUpload Hilfsprogramm jedoch verwenden, um mehrere Dateien gleichzeitig hochzuladen. Dies ist praktisch für Szenarien wie das Hochladen von Fotos, bei denen das Hochladen einer Datei gleichzeitig mühsam ist. (Informationen zum Hochladen von Fotos finden Sie unter Arbeiten mit Bildern in einer ASP.NET Web Pages Website.) In diesem Beispiel wird gezeigt, wie Sie Benutzern gleichzeitig das Hochladen von zwei Gleichzeitigen ermöglichen, obwohl Sie die gleiche Technik verwenden können, um mehr als das hochzuladen.

  1. Fügen Sie ihrer Website die ASP.NET Webhilfsbibliothek hinzu, wie unter Installieren von Hilfsprogrammen auf einer ASP.NET Web Pages-Website beschrieben, sofern noch nicht geschehen.

  2. Erstellen Sie eine neue Seite mit dem Namen FileUploadMultiple.cshtml.

  3. Ersetzen Sie den vorhandenen Inhalt auf der Seite durch Folgendes:

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

    In diesem Beispiel ist das FileUpload Hilfsprogramm im Text der Seite so konfiguriert, dass Benutzer standardmäßig zwei Dateien hochladen können. Da allowMoreFilesToBeAdded auf truefestgelegt ist, rendert das Hilfsprogramm einen Link, über den Benutzer weitere Uploadfelder hinzufügen können:

    Screenshot der Webbrowserseite zum Hochladen mehrerer Dateien mit zwei Dateiauswahlen und einer Schaltfläche

    Um die Dateien zu verarbeiten, die der Benutzer hochlädt, verwendet der Code die gleiche grundlegende Technik, die Sie im vorherigen Beispiel verwendet haben: Abrufen einer Datei aus Request.Files und speichern sie dann. (Einschließlich der verschiedenen Dinge, die Sie tun müssen, um den richtigen Dateinamen und Pfad zu erhalten.) Die Innovation dieses Mal besteht darin, dass der Benutzer möglicherweise mehrere Dateien hochlädt und Sie nicht viele kennen. Um dies herauszufinden, können Sie abrufen Request.Files.Count.

    Mit dieser Zahl in der Hand können Sie eine Schleife durchlaufen Request.Files, jede Datei nacheinander abrufen und speichern. Wenn Sie eine Sammlung mit einer bekannten Anzahl von Schleifen durchlaufen möchten, können Sie eine for Schleife wie folgt verwenden:

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

    Die Variable i ist nur ein temporärer Zähler, der von null bis zu einer von Ihnen festgelegten Obergrenze wechselt. In diesem Fall ist die Obergrenze die Anzahl der Dateien. Da der Zähler jedoch bei null beginnt, wie es typisch für Zählszenarien in ASP.NET ist, ist die Obergrenze tatsächlich um eins kleiner als die Dateianzahl. (Wenn drei Dateien hochgeladen werden, beträgt die Anzahl null bis 2.)

    Die uploadedCount Variable summiert alle Dateien, die erfolgreich hochgeladen und gespeichert wurden. Dieser Code berücksichtigen die Möglichkeit, dass eine erwartete Datei möglicherweise nicht hochgeladen werden kann.

  4. Führen Sie die Seite in einem Browser aus. Der Browser zeigt die Seite und die beiden Uploadfelder an.

  5. Wählen Sie zwei Dateien aus, die hochgeladen werden sollen.

  6. Klicken Sie auf Weitere Datei hinzufügen. Auf der Seite wird ein neues Uploadfeld angezeigt.

    Screenshot der Webbrowserseite zum Hochladen mehrerer Dateien mit zwei Dateiauswahlen mit ausgewählten Dateien und der Schaltfläche

  7. Klicken Sie auf Hochladen.

  8. Klicken Sie auf der Website mit der rechten Maustaste auf den Projektordner, und klicken Sie dann auf Aktualisieren.

  9. Öffnen Sie den Ordner UploadedFiles , um die erfolgreich hochgeladenen Dateien anzuzeigen.

Zusätzliche Ressourcen

Arbeiten mit Bildern in einer ASP.NET Web Pages-Website

Exporting to a CSV File (Exportieren als CSV-Datei)