Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
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.
Buat folder baru bernama App_Data, jika belum ada.
Di akar situs web Anda, buat file baru bernama UserData.cshtml.
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
metodeServer
objek . Ini mengembalikan jalur lengkap ke situs web Anda. Untuk mendapatkan jalur untuk akar situs web, Anda menggunakan~
operator (untuk merepresenasi akar virtual situs) keMapPath
. (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
WriteAllText
File
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.
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 .
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 .
Di situs web, buat salinan file UserData.cshtml dan beri nama salin UserDataMultiple.cshtml.
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 menggunakanthe AppendAllText
metode . Metodenya serupa, kecuali yangAppendAllText
menambahkan data ke akhir file.WriteAllText
Seperti halnya ,AppendAllText
membuat file jika belum ada.Jalankan halaman di browser.
Masukkan nilai untuk bidang lalu klik Kirim.
Tambahkan lebih banyak data dan kirim formulir lagi.
Kembali ke proyek Anda, klik kanan folder proyek, lalu klik Refresh.
Buka file data.txt . Sekarang berisi data baru yang baru saja Anda masukkan.
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.
Di akar situs web Anda, buat file baru bernama DisplayData.cshtml.
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 menggunakanFile.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 luarforeach
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 karenaFile.ReadAllLines
metode mengembalikan data sebagai array. Jenischar
data diperlukan karenaSplit
metode mengembalikan di mana setiap elemen berjenisarray
char
. (Untuk informasi tentang array, lihat Pengenalan ASP.NET Pemrograman Web Menggunakan Sintaks Razor.)Jalankan halaman di browser. Data yang Anda masukkan untuk contoh sebelumnya ditampilkan.
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.
Di situs web, buat subfolder bernama gambar.
Salin satu atau beberapa file .jpg ke dalam folder gambar .
Di akar situs web, buat file baru bernama FileDelete.cshtml.
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.Jalankan halaman di browser.
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.
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.
Di folder App_Data , buat folder baru dan beri nama UploadedFiles.
Di root, buat file baru bernama FileUpload.cshtml.
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: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 memilikiFiles
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 mendapatkanRequest.Files[0]
, untuk mendapatkan file kedua, Anda mendapatkanRequest.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 propertinyaFileName
. 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 fileSaveAs
yang diunggah untuk benar-benar menyimpan file.Jalankan halaman di browser.
Klik Telusuri lalu pilih file yang akan diunggah.
Kotak teks di samping tombol Telusuri akan berisi jalur dan lokasi file.
Klik Unggah.
Di situs web, klik kanan folder proyek lalu klik Refresh.
Buka folder UploadedFiles . File yang Anda unggah ada di folder .
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.
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.
Buat halaman baru bernama FileUploadMultiple.cshtml.
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. KarenaallowMoreFilesToBeAdded
diatur ketrue
, pembantu merender tautan yang memungkinkan pengguna menambahkan lebih banyak kotak unggahan: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 mendapatkanRequest.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 perulanganfor
, 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.Jalankan halaman di browser. Browser menampilkan halaman dan dua kotak unggahannya.
Pilih dua file untuk diunggah.
Klik Tambahkan file lain. Halaman menampilkan kotak unggah baru.
Klik Unggah.
Di situs web, klik kanan folder proyek lalu klik Refresh.
Buka folder UploadedFiles untuk melihat file yang berhasil diunggah.