Bagikan melalui


Bekerja dengan File di Situs Halaman Web (Razor) ASP.NET

oleh Tom FitzMacken

Artikel ini menjelaskan cara membaca, menulis, menambahkan, menghapus, dan mengunggah file di situs ASP.NET Web Pages (Razor).

Catatan

Jika Anda ingin mengunggah gambar dan memanipulasinya (misalnya, membalik atau mengubah ukurannya), lihat Bekerja dengan Gambar di Situs Halaman Web ASP.NET.

Yang akan Anda pelajari:

  • Cara membuat file teks dan menulis data ke dalamnya.
  • Cara menambahkan data ke file yang sudah ada.
  • Cara membaca file dan menampilkan darinya.
  • Cara menghapus file dari situs web.
  • Cara mengizinkan pengguna mengunggah satu file atau beberapa file.

Ini adalah fitur pemrograman ASP.NET yang diperkenalkan dalam artikel:

  • Objek File , yang menyediakan cara untuk mengelola file.
  • Pembantunya FileUpload .
  • Objek Path , yang menyediakan metode yang memungkinkan Anda memanipulasi jalur dan nama file.

Versi perangkat lunak yang digunakan dalam tutorial

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

Tutorial ini juga berfungsi dengan WebMatrix 3.

Membuat File Teks dan Menulis Data ke Dalamnya

Selain menggunakan database di situs web Anda, Anda mungkin bekerja dengan file. Misalnya, Anda dapat menggunakan file teks sebagai cara sederhana untuk menyimpan data untuk situs. (File teks yang digunakan untuk menyimpan data terkadang disebut file datar.) File teks dapat dalam format yang berbeda, seperti .txt, .xml, atau .csv (nilai yang dibatasi koma).

Jika Anda ingin menyimpan data dalam file teks, Anda dapat menggunakan File.WriteAllText metode untuk menentukan file yang akan dibuat dan data untuk menulisnya. Dalam prosedur ini, Anda akan membuat halaman yang berisi formulir sederhana dengan tiga input elemen (nama depan, nama belakang, dan alamat email) dan tombol Kirim . Saat pengguna mengirimkan formulir, Anda akan menyimpan input pengguna dalam file teks.

  1. Buat folder baru bernama App_Data, jika belum ada.

  2. Di akar situs web Anda, buat file baru bernama UserData.cshtml.

  3. Ganti konten yang sudah ada dengan yang berikut ini:

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

    Markup HTML membuat formulir dengan tiga kotak teks. Dalam kode, Anda menggunakan IsPost properti untuk menentukan apakah halaman telah dikirimkan sebelum Anda mulai memproses.

    Tugas pertama adalah mendapatkan input pengguna dan menetapkannya ke variabel. Kode kemudian menggabungkan nilai variabel terpisah ke dalam satu string yang dibatasi koma, yang kemudian disimpan dalam variabel yang berbeda. Perhatikan bahwa pemisah koma adalah string yang terkandung dalam tanda kutip (","), karena Anda benar-benar menyematkan koma ke dalam string besar yang Sedang Anda buat. Di akhir data yang Anda gabungkan bersama-sama, Anda menambahkan Environment.NewLine. Ini menambahkan pemisah baris (karakter baris baru). Apa yang Anda buat dengan semua perangkaian ini adalah string yang terlihat seperti ini:

    David,Jones,davidj@contoso.com
    

    (Dengan pemisah baris yang tidak terlihat di akhir.)

    Anda kemudian membuat variabel (dataFile) yang berisi lokasi dan nama file untuk menyimpan data. Mengatur lokasi memerlukan beberapa penanganan khusus. Di situs web, ini adalah praktik yang buruk untuk merujuk dalam kode ke jalur absolut seperti C:\Folder\File.txt untuk file di server web. Jika situs web dipindahkan, jalur absolut akan salah. Selain itu, untuk situs yang dihosting (dibandingkan dengan di komputer Anda sendiri) Anda biasanya tidak tahu apa jalur yang benar ketika Anda menulis kode.

    Tetapi kadang-kadang (seperti sekarang, untuk menulis file) Anda memerlukan jalur lengkap. Solusinya adalah menggunakan MapPath metode Server objek . Ini mengembalikan jalur lengkap ke situs web Anda. Untuk mendapatkan jalur untuk akar situs web, Anda menggunakan ~ operator (untuk merepresenasi akar virtual situs) ke MapPath. (Anda juga dapat meneruskan nama subfolder ke dalamnya, seperti ~/App_Data/, untuk mendapatkan jalur untuk subfolder tersebut.) Anda kemudian dapat menggabungkan informasi tambahan ke apa pun yang dikembalikan metode untuk membuat jalur lengkap. Dalam contoh ini, Anda menambahkan nama file. (Anda dapat membaca selengkapnya tentang cara bekerja dengan jalur file dan folder di Pengantar Pemrograman Halaman Web ASP.NET Menggunakan Sintaks Razor.)

    File disimpan dalam folder App_Data . Folder ini adalah folder khusus di ASP.NET yang digunakan untuk menyimpan file data, seperti yang dijelaskan dalam Pengantar Bekerja dengan Database di Situs Halaman Web ASP.NET.

    Metode WriteAllTextFile objek menulis data ke file. Metode ini mengambil dua parameter: nama (dengan jalur) file untuk ditulis, dan data aktual untuk ditulis. Perhatikan bahwa nama parameter pertama memiliki @ karakter sebagai awalan. Ini memberi tahu ASP.NET bahwa Anda menyediakan string verbatim harfiah, dan karakter seperti "/" tidak boleh ditafsirkan dengan cara khusus. (Untuk informasi selengkapnya, lihat Pengantar Pemrograman Web ASP.NET Menggunakan Sintaks Razor.)

    Catatan

    Agar kode Anda dapat menyimpan file di folder App_Data , aplikasi memerlukan izin baca-tulis untuk folder tersebut. Pada komputer pengembangan Anda, ini biasanya bukan masalah. Namun, ketika Anda menerbitkan situs Anda ke server web penyedia hosting, Anda mungkin perlu mengatur izin tersebut secara eksplisit. Jika Anda menjalankan kode ini di server penyedia hosting dan mendapatkan kesalahan, tanyakan kepada penyedia hosting untuk mengetahui cara mengatur izin tersebut.

  • Jalankan halaman di browser.

    Cuplikan layar jendela browser memperlihatkan bidang Teks Nama Depan, Nama Belakang, dan Email dengan tombol Kirim mengikutinya.

  • Masukkan nilai ke dalam bidang lalu klik Kirim.

  • Tutup browser.

  • Kembali ke proyek dan refresh tampilan.

  • Buka file data.txt . Data yang Anda kirimkan dalam formulir ada dalam file .

    Cuplikan layar file t x t titik data yang memperlihatkan data yang dimasukkan ke bidang browser web telah direkam ke dalam file t x t.

  • Tutup file data.txt .

Menambahkan Data ke File yang Sudah Ada

Dalam contoh sebelumnya, Anda menggunakan WriteAllText untuk membuat file teks yang hanya memiliki satu bagian data di dalamnya. Jika Anda memanggil metode lagi dan meneruskannya dengan nama file yang sama, file yang ada benar-benar ditimpa. Namun, setelah membuat file, Anda sering ingin menambahkan data baru ke akhir file. Anda dapat melakukannya menggunakan AppendAllText metode File objek .

  1. Di situs web, buat salinan file UserData.cshtml dan beri nama salin UserDataMultiple.cshtml.

  2. Ganti blok kode sebelum tag pembuka <!DOCTYPE html> dengan blok kode berikut:

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

    Kode ini memiliki satu perubahan di dalamnya dari contoh sebelumnya. Alih-alih menggunakan WriteAllText, ia menggunakan the AppendAllText metode . Metodenya serupa, kecuali yang AppendAllText menambahkan data ke akhir file. WriteAllTextSeperti halnya , AppendAllText membuat file jika belum ada.

  3. Jalankan halaman di browser.

  4. Masukkan nilai untuk bidang lalu klik Kirim.

  5. Tambahkan lebih banyak data dan kirim formulir lagi.

  6. Kembali ke proyek Anda, klik kanan folder proyek, lalu klik Refresh.

  7. Buka file data.txt . Sekarang berisi data baru yang baru saja Anda masukkan.

    Cuplikan layar file t x t titik data yang memperlihatkan data yang dimasukkan ke bidang browser web telah direkam tanpa menimpa data sebelumnya.

Membaca dan Menampilkan Data dari File

Bahkan jika Anda tidak perlu menulis data ke file teks, Anda mungkin kadang-kadang perlu membaca data dari satu. Untuk melakukan ini, Anda dapat kembali menggunakan File objek . Anda dapat menggunakan File objek untuk membaca setiap baris satu per satu (dipisahkan oleh hentian baris) atau untuk membaca item individual tidak peduli bagaimana mereka dipisahkan.

Prosedur ini memperlihatkan kepada Anda cara membaca dan menampilkan data yang Anda buat di contoh sebelumnya.

  1. Di akar situs web Anda, buat file baru bernama DisplayData.cshtml.

  2. Ganti konten yang sudah ada dengan yang berikut ini:

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

    Kode dimulai dengan membaca file yang Anda buat dalam contoh sebelumnya ke dalam variabel bernama userData, menggunakan panggilan metode ini:

    File.ReadAllLines(dataFile)
    

    Kode untuk melakukan ini ada di dalam pernyataan if . Ketika Anda ingin membaca file, ada baiknya menggunakan File.Exists metode untuk menentukan terlebih dahulu apakah file tersedia. Kode ini juga memeriksa apakah file kosong.

    Isi halaman berisi dua foreach perulangan, satu bersarang di dalam yang lain. Perulangan luar foreach mendapatkan satu baris pada satu waktu dari file data. Dalam hal ini, baris didefinisikan oleh pemisah baris dalam file — yaitu, setiap item data berada di barisnya sendiri. Perulangan luar membuat item baru (<li> elemen) di dalam daftar yang diurutkan (<ol> elemen ).

    Perulangan dalam membagi setiap baris data menjadi item (bidang) menggunakan koma sebagai pemisah. (Berdasarkan contoh sebelumnya, ini berarti bahwa setiap baris berisi tiga bidang — nama depan, nama belakang, dan alamat email, masing-masing dipisahkan oleh koma.) Perulangan dalam juga membuat <ul> daftar dan menampilkan satu item daftar untuk setiap bidang di baris data.

    Kode ini menggambarkan cara menggunakan dua jenis data, array dan char jenis data. Array diperlukan karena File.ReadAllLines metode mengembalikan data sebagai array. Jenis char data diperlukan karena Split metode mengembalikan di mana setiap elemen berjenis arraychar. (Untuk informasi tentang array, lihat Pengenalan ASP.NET Pemrograman Web Menggunakan Sintaks Razor.)

  3. Jalankan halaman di browser. Data yang Anda masukkan untuk contoh sebelumnya ditampilkan.

    Cuplikan layar jendela browser memperlihatkan data dari data dari file t x t titik data yang ditampilkan dalam array.

Tip

Menampilkan Data dari File Comma-Delimited Microsoft Excel

Anda bisa menggunakan Microsoft Excel untuk menyimpan data yang terkandung dalam lembar bentang sebagai file yang dibatasi koma ( file.csv ). Saat Anda melakukannya, file disimpan dalam teks biasa, bukan dalam format Excel. Setiap baris di spreadsheet dipisahkan oleh pemisah baris dalam file teks, dan setiap item data dipisahkan oleh koma. Anda bisa menggunakan kode yang diperlihatkan dalam contoh sebelumnya untuk membaca file yang dibatasi koma Excel hanya dengan mengubah nama file data dalam kode Anda.

Menghapus File

Untuk menghapus file dari situs web, Anda dapat menggunakan metode ini File.Delete . Prosedur ini menunjukkan cara mengizinkan pengguna menghapus gambar (.jpg file) dari folder gambar jika mereka mengetahui nama file.

Catatan

Penting Di situs web produksi, Anda biasanya membatasi siapa yang diizinkan untuk membuat perubahan pada data. Untuk informasi tentang cara menyiapkan keanggotaan dan tentang cara mengotorisasi pengguna untuk melakukan tugas di situs, lihat Menambahkan Keamanan dan Keanggotaan ke Situs Halaman Web ASP.NET.

  1. Di situs web, buat subfolder bernama gambar.

  2. Salin satu atau beberapa file .jpg ke dalam folder gambar .

  3. Di akar situs web, buat file baru bernama FileDelete.cshtml.

  4. Ganti konten yang sudah ada dengan yang berikut ini:

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

    Halaman ini berisi formulir di mana pengguna dapat memasukkan nama file gambar. Mereka tidak memasukkan ekstensi nama file .jpg ; dengan membatasi nama file seperti ini, Anda membantu mencegah pengguna menghapus file arbitrer di situs Anda.

    Kode membaca nama file yang telah dimasukkan pengguna lalu membuat jalur lengkap. Untuk membuat jalur, kode menggunakan jalur situs web saat ini (seperti yang dikembalikan oleh Server.MapPath metode ), nama folder gambar , nama yang telah disediakan pengguna, dan ".jpg" sebagai string harfiah.

    Untuk menghapus file, kode memanggil File.Delete metode , melewatinya jalur lengkap yang baru saja Anda buat. Di akhir markup, kode menampilkan pesan konfirmasi bahwa file telah dihapus.

  5. Jalankan halaman di browser.

    Cuplikan layar jendela browser memperlihatkan hapus foto dari halaman Situs dengan bidang untuk nama file dan tombol Kirim.

  6. Masukkan nama file yang akan dihapus lalu klik Kirim. Jika file dihapus, nama file ditampilkan di bagian bawah halaman.

Mengizinkan Pengguna Mengunggah File

Pembantu FileUpload memungkinkan pengguna mengunggah file ke situs web Anda. Prosedur di bawah ini menunjukkan kepada Anda cara mengizinkan pengguna mengunggah satu file.

  1. Tambahkan Pustaka Pembantu Web ASP.NET ke situs web Anda seperti yang dijelaskan dalam Menginstal Pembantu di Situs Halaman Web ASP.NET, jika Anda tidak menambahkannya sebelumnya.

  2. Di folder App_Data , buat folder baru dan beri nama UploadedFiles.

  3. Di root, buat file baru bernama FileUpload.cshtml.

  4. Ganti konten yang sudah ada di halaman dengan yang berikut ini:

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

    Bagian isi halaman menggunakan pembantu FileUpload untuk membuat kotak unggah dan tombol yang mungkin Anda kenal:

    Cuplikan layar halaman browser web Unggah File memperlihatkan pemilih file pembantu Pengunggahan File dan tombol Unggah.

    Properti yang Anda tetapkan untuk pembantu FileUpload menentukan bahwa Anda ingin satu kotak untuk file diunggah dan bahwa Anda ingin tombol kirim membaca Unggah. (Anda akan menambahkan lebih banyak kotak nanti di artikel.)

    Saat pengguna mengklik Unggah, kode di bagian atas halaman mendapatkan file dan menyimpannya. Objek Request yang biasanya Anda gunakan untuk mendapatkan nilai dari bidang formulir juga memiliki Files array yang berisi file (atau file) yang telah diunggah. Anda bisa mendapatkan file individual dari posisi tertentu dalam array — misalnya, untuk mendapatkan file pertama yang diunggah, Anda mendapatkan Request.Files[0], untuk mendapatkan file kedua, Anda mendapatkan Request.Files[1], dan sebagainya. (Ingat bahwa dalam pemrograman, penghitungan biasanya dimulai pada nol.)

    Saat Anda mengambil file yang diunggah, Anda memasukkannya ke dalam variabel (di sini, uploadedFile) sehingga Anda dapat memanipulasinya. Untuk menentukan nama file yang diunggah, Anda cukup mendapatkan propertinya FileName . Namun, saat pengguna mengunggah file, FileName berisi nama asli pengguna, yang mencakup seluruh jalur. Mungkin terlihat seperti ini:

    C:\Users\Public\Sample.txt

    Namun, Anda tidak ingin semua informasi jalur tersebut, karena itu adalah jalur di komputer pengguna, bukan untuk server Anda. Anda hanya ingin nama file yang sebenarnya (Sample.txt). Anda dapat menghapus hanya file dari jalur dengan menggunakan Path.GetFileName metode , seperti ini:

    Path.GetFileName(uploadedFile.FileName)
    

    Objek Path adalah utilitas yang memiliki sejumlah metode seperti ini yang dapat Anda gunakan untuk strip jalur, menggabungkan jalur, dan sebagainya.

    Setelah mendapatkan nama file yang diunggah, Anda dapat membuat jalur baru tempat Anda ingin menyimpan file yang diunggah di situs web Anda. Dalam hal ini, Anda menggabungkan Server.MapPath, nama folder (App_Data/UploadedFiles), dan nama file yang baru dilucuti untuk membuat jalur baru. Anda kemudian dapat memanggil metode file SaveAs yang diunggah untuk benar-benar menyimpan file.

  5. Jalankan halaman di browser.

    Cuplikan layar halaman browser web Contoh File Tunggal Unggah File memperlihatkan pemilih file dan tombol Unggah.

  6. Klik Telusuri lalu pilih file yang akan diunggah.

    Cuplikan layar jendela File Explorer memperlihatkan file yang dipilih dan disorot dengan warna biru dan tombol Buka disorot dalam persegi panjang biru.

    Kotak teks di samping tombol Telusuri akan berisi jalur dan lokasi file.

    Cuplikan layar halaman browser web Contoh File Tunggal Unggah File memperlihatkan pemilih file dengan file yang dipilih dan tombol Unggah.

  7. Klik Unggah.

  8. Di situs web, klik kanan folder proyek lalu klik Refresh.

  9. Buka folder UploadedFiles . File yang Anda unggah ada di folder .

    Cuplikan layar hierarki folder proyek memperlihatkan file Samples dot t x t yang disorot dengan warna biru di dalam folder File yang Diunggah.

Mengizinkan pengguna mengunggah beberapa file

Dalam contoh sebelumnya, Anda mengizinkan pengguna mengunggah satu file. Tetapi Anda dapat menggunakan pembantu FileUpload untuk mengunggah lebih dari satu file pada satu waktu. Ini berguna untuk skenario seperti mengunggah foto, di mana mengunggah satu file pada satu waktu melelahkan. (Anda dapat membaca tentang mengunggah foto dalam Bekerja dengan Gambar di Situs Halaman Web ASP.NET.) Contoh ini menunjukkan cara mengizinkan pengguna mengunggah dua pada satu waktu, meskipun Anda dapat menggunakan teknik yang sama untuk mengunggah lebih dari itu.

  1. Tambahkan Pustaka Pembantu Web ASP.NET ke situs web Anda seperti yang dijelaskan dalam Menginstal Pembantu di Situs Halaman Web ASP.NET, jika Anda belum melakukannya.

  2. Buat halaman baru bernama FileUploadMultiple.cshtml.

  3. Ganti konten yang sudah ada di halaman dengan yang berikut ini:

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

    Dalam contoh ini, pembantu FileUpload di isi halaman dikonfigurasi untuk memungkinkan pengguna mengunggah dua file secara default. Karena allowMoreFilesToBeAdded diatur ke true, pembantu merender tautan yang memungkinkan pengguna menambahkan lebih banyak kotak unggahan:

    Cuplikan layar halaman browser web Contoh File Unggah Beberapa File memperlihatkan dua pemilih file dan tombol Unggah.

    Untuk memproses file yang diunggah pengguna, kode menggunakan teknik dasar yang sama dengan yang Anda gunakan dalam contoh sebelumnya — dapatkan file dari Request.Files lalu simpan. (Termasuk berbagai hal yang perlu Anda lakukan untuk mendapatkan nama dan jalur file yang tepat.) Inovasi kali ini adalah bahwa pengguna mungkin mengunggah beberapa file dan Anda tidak tahu banyak. Untuk mengetahuinya, Anda bisa mendapatkan Request.Files.Count.

    Dengan nomor ini di tangan, Anda dapat mengulang melalui Request.Files, mengambil setiap file secara bergantian, dan menyimpannya. Ketika Anda ingin mengulang beberapa kali yang diketahui melalui koleksi, Anda dapat menggunakan perulangan for , seperti ini:

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

    Variabel i hanyalah penghitung sementara yang akan pergi dari nol ke batas atas apa pun yang Anda tetapkan. Dalam hal ini, batas atas adalah jumlah file. Tetapi karena penghitung dimulai pada nol, seperti biasa untuk menghitung skenario dalam ASP.NET, batas atas sebenarnya kurang dari jumlah file. (Jika tiga file diunggah, jumlahnya adalah nol hingga 2.)

    Variabel uploadedCount menjumlahkan semua file yang berhasil diunggah dan disimpan. Kode ini memperkirakan kemungkinan bahwa file yang diharapkan mungkin tidak dapat diunggah.

  4. Jalankan halaman di browser. Browser menampilkan halaman dan dua kotak unggahannya.

  5. Pilih dua file untuk diunggah.

  6. Klik Tambahkan file lain. Halaman menampilkan kotak unggah baru.

    Cuplikan layar halaman browser web Unggah Beberapa Contoh File yang memperlihatkan dua pemilih file dengan file yang dipilih dan tombol Unggah.

  7. Klik Unggah.

  8. Di situs web, klik kanan folder proyek lalu klik Refresh.

  9. Buka folder UploadedFiles untuk melihat file yang berhasil diunggah.

Sumber Daya Tambahan

Bekerja dengan Gambar di Situs Halaman Web ASP.NET

Mengekspor ke File CSV