Bagikan melalui


Mengunggah File (VB)

oleh Scott Mitchell

Unduh PDF

Pelajari cara mengizinkan pengguna mengunggah file biner (seperti dokumen Word atau PDF) ke situs Web Tempat mereka disimpan di sistem file server atau database.

Pendahuluan

Semua tutorial yang telah kami periksa sejauh ini telah bekerja secara eksklusif dengan data teks. Namun, banyak aplikasi memiliki model data yang mengambil data teks dan biner. Situs kencan online mungkin memungkinkan pengguna mengunggah gambar untuk dikaitkan dengan profil mereka. Situs web perekrutan mungkin memungkinkan pengguna mengunggah resume mereka sebagai dokumen Microsoft Word atau PDF.

Bekerja dengan data biner menambahkan serangkaian tantangan baru. Kita harus memutuskan bagaimana data biner disimpan dalam aplikasi. Antarmuka yang digunakan untuk menyisipkan rekaman baru harus diperbarui untuk memungkinkan pengguna mengunggah file dari komputer mereka dan langkah tambahan harus diambil untuk menampilkan atau menyediakan sarana untuk mengunduh data biner terkait rekaman. Dalam tutorial ini dan tiga berikutnya kita akan mengeksplorasi cara merintangi tantangan ini. Di akhir tutorial ini kita akan membangun aplikasi yang berfungsi penuh yang mengaitkan gambar dan brosur PDF dengan setiap kategori. Dalam tutorial khusus ini kita akan melihat berbagai teknik untuk menyimpan data biner dan menjelajahi cara memungkinkan pengguna mengunggah file dari komputer mereka dan menyimpannya di sistem file server web.

Catatan

Data biner yang merupakan bagian dari model data aplikasi terkadang disebut sebagai BLOB, akronim untuk Binary Large OBject. Dalam tutorial ini saya telah memilih untuk menggunakan data biner terminologi, meskipun istilah BLOB identik.

Langkah 1: Membuat Halaman Web Bekerja dengan Data Biner

Sebelum kita mulai menjelajahi tantangan yang terkait dengan penambahan dukungan untuk data biner, mari kita luangkan waktu sejenak terlebih dahulu untuk membuat halaman ASP.NET dalam proyek situs web kita yang akan kita butuhkan untuk tutorial ini dan tiga berikutnya. Mulailah dengan menambahkan folder baru bernama BinaryData. Selanjutnya, tambahkan halaman ASP.NET berikut ke folder tersebut Site.master , pastikan untuk mengaitkan setiap halaman dengan halaman master:

  • Default.aspx
  • FileUpload.aspx
  • DisplayOrDownloadData.aspx
  • UploadInDetailsView.aspx
  • UpdatingAndDeleting.aspx

Menambahkan Halaman ASP.NET untuk Tutorial Terkait Data Biner

Gambar 1: Tambahkan Halaman ASP.NET untuk Tutorial Terkait Data Biner

Seperti di folder lain, Default.aspx di BinaryData folder akan mencantumkan tutorial di bagiannya. Ingat bahwa SectionLevelTutorialListing.ascx Kontrol Pengguna menyediakan fungsionalitas ini. Oleh karena itu, tambahkan Kontrol Pengguna ini ke Default.aspx dengan menyeretnya dari Penjelajah Solusi ke tampilan Desain halaman.

Tambahkan Kontrol Pengguna SectionLevelTutorialListing.ascx ke Default.aspx

Gambar 2: Tambahkan SectionLevelTutorialListing.ascx Kontrol Pengguna ke Default.aspx (Klik untuk melihat gambar ukuran penuh)

Terakhir, tambahkan halaman ini sebagai entri ke Web.sitemap file. Secara khusus, tambahkan markup berikut setelah Meningkatkan GridView <siteMapNode>:

<siteMapNode 
    title="Working with Binary Data" 
    url="~/BinaryData/Default.aspx" 
    description="Extend the data model to include collecting binary data.">
    
    <siteMapNode 
        title="Uploading Files" 
        url="~/BinaryData/FileUpload.aspx" 
        description="Examine the different ways to store binary data on the 
                     web server and see how to accept uploaded files from users 
                     with the FileUpload control." />
    <siteMapNode 
        title="Display or Download Binary Data" 
        url="~/BinaryData/DisplayOrDownloadData.aspx" 
        description="Let users view or download the captured binary data." />
    <siteMapNode 
        title="Adding New Binary Data" 
        url="~/BinaryData/UploadInDetailsView.aspx" 
        description="Learn how to augment the inserting interface to 
                     include a FileUpload control." />
    <siteMapNode 
        title="Updating and Deleting Existing Binary Data" 
        url="~/BinaryData/UpdatingAndDeleting.aspx" 
        description="Learn how to update and delete existing binary data." />
</siteMapNode>

Setelah memperbarui Web.sitemap, luangkan waktu sejenak untuk melihat situs web tutorial melalui browser. Menu di sebelah kiri sekarang menyertakan item untuk tutorial Bekerja dengan Data Biner.

Peta Situs Sekarang Menyertakan Entri untuk Tutorial Bekerja dengan Data Biner

Gambar 3: Peta Situs Sekarang Menyertakan Entri untuk Tutorial Bekerja dengan Data Biner

Langkah 2: Memutuskan Tempat Menyimpan Data Biner

Data biner yang terkait dengan model data aplikasi dapat disimpan di salah satu dari dua tempat: pada sistem file server web dengan referensi ke file yang disimpan dalam database; atau langsung dalam database itu sendiri (lihat Gambar 4). Setiap pendekatan memiliki serangkaian pro dan kontra sendiri dan berjasa dalam diskusi yang lebih rinci.

Data Biner Dapat Disimpan Pada Sistem File atau Langsung di Database

Gambar 4: Data Biner Dapat Disimpan Pada Sistem File atau Langsung di Database (Klik untuk melihat gambar ukuran penuh)

Bayangkan bahwa kami ingin memperluas database Northwind untuk mengaitkan gambar dengan setiap produk. Salah satu opsinya adalah menyimpan file gambar ini di sistem file server web dan merekam jalur dalam Products tabel. Dengan pendekatan ini, kita akan menambahkan ImagePath kolom ke Products tabel jenis varchar(200), mungkin. Ketika pengguna mengunggah gambar untuk Chai, gambar tersebut mungkin disimpan di sistem file server web di , di ~/Images/Tea.jpgmana ~ mewakili jalur fisik aplikasi. Artinya, jika situs web berakar pada jalur C:\Websites\Northwind\fisik , ~/Images/Tea.jpg akan setara dengan C:\Websites\Northwind\Images\Tea.jpg. Setelah mengunggah file gambar, kami akan memperbarui rekaman Chai dalam Products tabel sehingga kolomnya ImagePath mereferensikan jalur gambar baru. Kita dapat menggunakan ~/Images/Tea.jpg atau hanya Tea.jpg jika kita memutuskan bahwa semua gambar produk akan ditempatkan di folder aplikasi.Images

Keuntungan utama menyimpan data biner pada sistem file adalah:

  • Kemudahan implementasi seperti yang akan kita lihat segera, menyimpan dan mengambil data biner yang disimpan langsung dalam database melibatkan sedikit lebih banyak kode daripada saat bekerja dengan data melalui sistem file. Selain itu, agar pengguna dapat melihat atau mengunduh data biner, mereka harus disajikan dengan URL ke data tersebut. Jika data berada di sistem file server web, URL mudah. Namun, jika data disimpan dalam database, halaman web perlu dibuat yang akan mengambil dan mengembalikan data dari database.
  • Akses yang lebih luas ke data biner, data biner mungkin perlu dapat diakses oleh layanan atau aplikasi lain, yang tidak dapat menarik data dari database. Misalnya, gambar yang terkait dengan setiap produk mungkin juga perlu tersedia untuk pengguna melalui FTP, dalam hal ini kita ingin menyimpan data biner pada sistem file.
  • Performa jika data biner disimpan pada sistem file, permintaan dan kemacetan jaringan antara server database dan server web akan kurang dari jika data biner disimpan langsung dalam database.

Kerugian utama dari menyimpan data biner pada sistem file adalah bahwa ia memisahkan data dari database. Jika rekaman dihapus dari Products tabel, file terkait pada sistem file server web tidak dihapus secara otomatis. Kita harus menulis kode tambahan untuk menghapus file atau sistem file akan menjadi berantakan dengan file yang tidak digunakan dan yatim piatu. Selain itu, ketika mencadangkan database, kita harus memastikan untuk membuat cadangan data biner terkait pada sistem file juga. Memindahkan database ke situs atau server lain menimbulkan tantangan serupa.

Atau, data biner dapat disimpan langsung dalam database Microsoft SQL Server 2005 dengan membuat kolom jenis varbinary. Seperti jenis data panjang variabel lainnya, Anda dapat menentukan panjang maksimum data biner yang dapat disimpan di kolom ini. Misalnya, untuk memesan paling banyak penggunaan varbinary(5000)5.000 byte ; varbinary(MAX) memungkinkan ukuran penyimpanan maksimum, sekitar 2 GB.

Keuntungan utama menyimpan data biner secara langsung dalam database adalah konektor yang ketat antara data biner dan catatan database. Ini sangat menyederhanakan tugas administrasi database, seperti pencadangan atau memindahkan database ke situs atau server yang berbeda. Selain itu, menghapus rekaman secara otomatis menghapus data biner yang sesuai. Ada juga manfaat yang lebih halang untuk menyimpan data biner dalam database.

Catatan

Di Microsoft SQL Server 2000 dan versi yang lebih lama, varbinary jenis data memiliki batas maksimum 8.000 byte. Untuk menyimpan hingga 2 GB data biner, image jenis data perlu digunakan sebagai gantinya. Dengan penambahan MAX di SQL Server 2005, namun, image jenis data telah ditolak. Ini masih didukung untuk kompatibilitas mundur, tetapi Microsoft telah mengumumkan bahwa image jenis data akan dihapus di versi SQL Server yang akan datang.

Jika Anda bekerja dengan model data yang lebih lama, Anda mungkin melihat image jenis data. Tabel database Categories Northwind memiliki Picture kolom yang dapat digunakan untuk menyimpan data biner file gambar untuk kategori. Karena database Northwind memiliki akarnya di Microsoft Access dan versi SQL Server yang lebih lama, kolom ini berjenis image.

Untuk tutorial ini dan tiga berikutnya, kita akan menggunakan kedua pendekatan. Tabel Categories sudah memiliki Picture kolom untuk menyimpan konten biner gambar untuk kategori tersebut. Kami akan menambahkan kolom tambahan, BrochurePath, untuk menyimpan jalur ke PDF di sistem file server web yang dapat digunakan untuk memberikan gambaran umum kategori berkualitas cetak dan dipolihkan.

Langkah 3: MenambahkanBrochurePathKolom keCategoriesTabel

Saat ini tabel Kategori hanya memiliki empat kolom: CategoryID, , CategoryNameDescription, dan Picture. Selain bidang ini, kita perlu menambahkan yang baru yang akan menunjuk ke brosur kategori (jika ada). Untuk menambahkan kolom ini, buka Penjelajah Server, telusuri paling detail tabel, klik kanan pada Categories tabel dan pilih Buka Definisi Tabel (lihat Gambar 5). Jika Anda tidak melihat Server Explorer, munculkan dengan memilih opsi Server Explorer dari menu Tampilan, atau tekan Ctrl+Alt+S.

Tambahkan kolom baru varchar(200) ke Categories tabel yang diberi nama BrochurePath dan izinkan NULL dan klik ikon Simpan (atau tekan Ctrl+S).

Menambahkan Kolom BrochurePath ke Tabel Kategori

Gambar 5: Tambahkan BrochurePath Kolom ke Categories Tabel (Klik untuk melihat gambar ukuran penuh)

Langkah 4: Memperbarui Arsitektur untuk MenggunakanPicturekolom danBrochurePath

CategoriesDataTable di Lapisan Akses Data (DAL) saat ini memiliki empat DataColumn s yang ditentukan: CategoryID, , CategoryNameDescription, dan NumberOfProducts. Ketika kami awalnya merancang DataTable ini dalam tutorial Membuat Lapisan Akses Data, satu-satunya CategoriesDataTable memiliki tiga kolom pertama; NumberOfProducts kolom ditambahkan dalam Master/Detail Menggunakan Daftar Berpoin Catatan Master dengan tutorial Detail DataList .

Seperti yang dibahas dalam Membuat Lapisan Akses Data, DataTable dalam Himpunan Data Yang Ditik membentuk objek bisnis. TableAdapters bertanggung jawab untuk berkomunikasi dengan database dan mengisi objek bisnis dengan hasil kueri. diisi CategoriesDataTable oleh CategoriesTableAdapter, yang memiliki tiga metode pengambilan data:

  • GetCategories() menjalankan kueri utama TableAdapter dan mengembalikan CategoryIDbidang , CategoryName, dan Description dari semua rekaman dalam Categories tabel. Kueri utama adalah apa yang digunakan oleh metode dan Insert yang dibuat Update secara otomatis.
  • GetCategoryByCategoryID(categoryID) CategoryIDmengembalikan bidang , CategoryName, dan Description dari kategori yang CategoryID sama dengan categoryID.
  • GetCategoriesAndNumberOfProducts() - mengembalikan CategoryIDbidang , CategoryName, dan Description untuk semua rekaman dalam Categories tabel. Juga menggunakan subkueri untuk mengembalikan jumlah produk yang terkait dengan setiap kategori.

Perhatikan bahwa tidak ada kueri ini yang mengembalikan Categories tabel atau PictureBrochurePath kolom; juga tidak CategoriesDataTable menyediakan DataColumn untuk bidang ini. Untuk bekerja dengan Gambar dan BrochurePath properti, kita perlu terlebih dahulu menambahkannya ke CategoriesDataTable lalu memperbarui CategoriesTableAdapter kelas untuk mengembalikan kolom ini.

PictureMenambahkan danBrochurePath``DataColumn

Mulailah dengan menambahkan kedua kolom ini ke CategoriesDataTable. Klik kanan pada CategoriesDataTable header s, pilih Tambahkan dari menu konteks lalu pilih opsi Kolom. Ini akan membuat baru DataColumn di DataTable bernama Column1. Ganti nama kolom ini menjadi Picture. Dari jendela Properti, atur DataColumn properti s DataType ke System.Byte[] (ini bukan opsi di daftar drop-down; Anda perlu mengetikkannya).

Buat Gambar Bernama DataColumn yang DataType-nya adalah System.Byte[]

Gambar 6: Buat DataColumn Bernama Picture yang DataType namanya System.Byte[] (Klik untuk melihat gambar ukuran penuh)

Tambahkan yang lain DataColumn ke DataTable, beri nama BrochurePath menggunakan nilai default DataType (System.String).

MengembalikanPicturenilai danBrochurePathdari TableAdapter

Dengan kedua DataColumn s ini ditambahkan ke CategoriesDataTable, kami siap untuk memperbarui CategoriesTableAdapter. Kita dapat memiliki kedua nilai kolom ini yang dikembalikan dalam kueri TableAdapter utama, tetapi ini akan mengembalikan data biner setiap kali GetCategories() metode dipanggil. Sebagai gantinya, mari kita perbarui kueri TableAdapter utama untuk mengembalikan BrochurePath dan membuat metode pengambilan data tambahan yang mengembalikan kolom kategori tertentu Picture .

Untuk memperbarui kueri TableAdapter utama, klik kanan pada CategoriesTableAdapter header s dan pilih opsi Konfigurasi dari menu konteks. Ini memunculkan Wizard Konfigurasi Adaptor Tabel, yang telah kita lihat dalam sejumlah tutorial sebelumnya. Perbarui kueri untuk mengembalikan BrochurePath dan klik Selesai.

Perbarui Daftar Kolom di Pernyataan SELECT untuk Juga Mengembalikan BrochurePath

Gambar 7: Perbarui Daftar Kolom dalam SELECT Pernyataan ke Juga Kembali BrochurePath (Klik untuk melihat gambar ukuran penuh)

Saat menggunakan pernyataan SQL ad-hoc untuk TableAdapter, memperbarui daftar kolom di kueri utama memperbarui daftar kolom untuk semua SELECT metode kueri di TableAdapter. Itu berarti metode telah diperbarui GetCategoryByCategoryID(categoryID) untuk mengembalikan BrochurePath kolom, yang mungkin menjadi apa yang kita inginkan. Namun, ini juga memperbarui daftar kolom dalam GetCategoriesAndNumberOfProducts() metode , menghapus subkueri yang mengembalikan jumlah produk untuk setiap kategori! Oleh karena itu, kita perlu memperbarui kueri metode SELECT ini. Klik kanan pada GetCategoriesAndNumberOfProducts() metode , pilih Konfigurasikan, dan kembalikan SELECT kueri kembali ke nilai aslinya:

SELECT CategoryID, CategoryName, Description, 
       (SELECT COUNT(*) 
            FROM Products p 
            WHERE p.CategoryID = c.CategoryID) 
       as NumberOfProducts
FROM Categories c

Selanjutnya, buat metode TableAdapter baru yang mengembalikan nilai kolom kategori tertentu Picture . Klik kanan pada CategoriesTableAdapter header s dan pilih opsi Tambahkan Kueri untuk meluncurkan Wizard Konfigurasi Kueri TableAdapter. Langkah pertama wizard ini bertanya kepada kami apakah kami ingin mengkueri data menggunakan pernyataan SQL ad-hoc, prosedur tersimpan baru, atau yang sudah ada. Pilih Gunakan pernyataan SQL dan klik Berikutnya. Karena kita akan mengembalikan baris, pilih opsi SELECT yang mengembalikan baris dari langkah kedua.

Pilih Opsi Gunakan pernyataan SQL

Gambar 8: Pilih Opsi Gunakan pernyataan SQL (Klik untuk melihat gambar ukuran penuh)

Karena Kueri Akan Mengembalikan Rekaman dari Tabel Kategori, Pilih SELECT yang mengembalikan baris

Gambar 9: Karena Kueri Akan Mengembalikan Rekaman dari Tabel Kategori, Pilih SELECT yang mengembalikan baris (Klik untuk melihat gambar ukuran penuh)

Pada langkah ketiga, masukkan kueri SQL berikut dan klik Berikutnya:

SELECT     CategoryID, CategoryName, Description, BrochurePath, Picture
FROM       Categories
WHERE      CategoryID = @CategoryID

Langkah terakhir adalah memilih nama untuk metode baru. Gunakan FillCategoryWithBinaryDataByCategoryID dan GetCategoryWithBinaryDataByCategoryID untuk pola Isi DataTable dan Kembalikan DataTable. Klik Selesai untuk menyelesaikan wizard.

Pilih Nama untuk Metode TableAdapter s

Gambar 10: Pilih Nama untuk Metode TableAdapter s (Klik untuk melihat gambar ukuran penuh)

Catatan

Setelah menyelesaikan Wizard Konfigurasi Kueri Adapter Tabel, Anda mungkin melihat kotak dialog yang memberi tahu Anda bahwa teks perintah baru mengembalikan data dengan skema yang berbeda dari skema kueri utama. Singkatnya, wizard mencatat bahwa kueri GetCategories() utama TableAdapter mengembalikan skema yang berbeda dari yang baru saja kita buat. Tapi inilah yang kami inginkan, sehingga Anda dapat mengalihkan pesan ini.

Selain itu, perlu diingat bahwa jika Anda menggunakan pernyataan SQL ad-hoc dan menggunakan wizard untuk mengubah kueri utama TableAdapter di beberapa titik waktu kemudian, itu akan memodifikasi GetCategoryWithBinaryDataByCategoryID daftar kolom pernyataan metode s SELECT untuk menyertakan hanya kolom tersebut dari kueri utama (artinya, itu akan menghapus Picture kolom dari kueri). Anda harus memperbarui daftar kolom secara manual untuk mengembalikan Picture kolom, mirip dengan apa yang kami lakukan dengan GetCategoriesAndNumberOfProducts() metode sebelumnya dalam langkah ini.

Setelah menambahkan keduanya DataColumn ke CategoriesDataTable dan GetCategoryWithBinaryDataByCategoryID metode ke CategoriesTableAdapter, kelas-kelas ini di Perancang Himpunan Data Yang Di ketik akan terlihat seperti cuplikan layar di Gambar 11.

Perancang Himpunan Data Menyertakan Kolom dan Metode Baru

Gambar 11: Perancang Himpunan Data Menyertakan Kolom dan Metode Baru

Memperbarui Lapisan Logika Bisnis (BLL)

Dengan DAL diperbarui, semua yang tersisa adalah menambah Business Logic Layer (BLL) untuk menyertakan metode untuk metode baru CategoriesTableAdapter . Tambahkan metode berikut ke kelas CategoriesBLL:

<System.ComponentModel.DataObjectMethodAttribute _
    (System.ComponentModel.DataObjectMethodType.Select, False)> _
Public Function GetCategoryWithBinaryDataByCategoryID(categoryID As Integer) _
    As Northwind.CategoriesDataTable
    
    Return Adapter.GetCategoryWithBinaryDataByCategoryID(categoryID)
End Function

Langkah 5: Mengunggah File Dari Klien ke Server Web

Saat mengumpulkan data biner, sering kali data ini disediakan oleh pengguna akhir. Untuk mengambil informasi ini, pengguna harus dapat mengunggah file dari komputer mereka ke server web. Data yang diunggah kemudian perlu diintegrasikan dengan model data, yang mungkin berarti menyimpan file ke sistem file server web dan menambahkan jalur ke file dalam database, atau menulis konten biner langsung ke dalam database. Dalam langkah ini kita akan melihat cara mengizinkan pengguna mengunggah file dari komputer mereka ke server. Dalam tutorial berikutnya kita akan mengalihkan perhatian kita untuk mengintegrasikan file yang diunggah dengan model data.

ASP.NET kontrol Web FileUpload baru 2.0 menyediakan mekanisme bagi pengguna untuk mengirim file dari komputer mereka ke server web. Kontrol FileUpload dirender sebagai <input> elemen yang atributnya type diatur ke file, yang ditampilkan browser sebagai kotak teks dengan tombol Telusuri. Mengklik tombol Telusuri memunculkan kotak dialog tempat pengguna dapat memilih file. Ketika formulir diposting kembali, konten file s yang dipilih dikirim bersama dengan postback. Di sisi server, informasi tentang file yang diunggah dapat diakses melalui properti kontrol FileUpload.

Untuk menunjukkan pengunggahan file, buka FileUpload.aspx halaman di BinaryData folder, seret kontrol FileUpload dari Kotak Alat ke Perancang, dan atur properti kontrol ID ke UploadTest. Selanjutnya, tambahkan pengaturan kontrol Web Tombol dan ID propertinya Text ke UploadButton dan Unggah File yang Dipilih. Terakhir, letakkan kontrol Web Label di bawah Tombol, bersihkan propertinya Text dan atur propertinya ID ke UploadDetails.

Menambahkan Kontrol FileUpload ke Halaman ASP.NET

Gambar 12: Tambahkan Kontrol FileUpload ke Halaman ASP.NET (Klik untuk melihat gambar ukuran penuh)

Gambar 13 memperlihatkan halaman ini saat dilihat melalui browser. Perhatikan bahwa mengklik tombol Telusuri memunculkan kotak dialog pemilihan file, memungkinkan pengguna untuk memilih file dari komputer mereka. Setelah file dipilih, mengklik tombol Unggah File yang Dipilih menyebabkan postback yang mengirim konten biner file yang dipilih ke server web.

Pengguna Dapat Memilih File untuk Diunggah dari Komputer mereka ke Server

Gambar 13: Pengguna Dapat Memilih File untuk Diunggah dari Komputer mereka ke Server (Klik untuk melihat gambar ukuran penuh)

Pada postback, file yang diunggah dapat disimpan ke sistem file atau data binernya dapat dikerjakan langsung melalui Stream. Untuk contoh ini, mari kita buat ~/Brochures folder dan simpan file yang diunggah di sana. Mulailah dengan menambahkan Brochures folder ke situs sebagai subfolder direktori akar. Selanjutnya, buat penanganan aktivitas untuk UploadButton peristiwa s Click dan tambahkan kode berikut:

Protected Sub UploadButton_Click(sender As Object, e As EventArgs) _
    Handles UploadButton.Click
    
    If UploadTest.HasFile = False Then
        ' No file uploaded!
        UploadDetails.Text = "Please first select a file to upload..."
    Else
        ' Display the uploaded file's details
        UploadDetails.Text = String.Format( _
                "Uploaded file: {0}<br />" & _
                "File size (in bytes): {1:N0}<br />" & _
                "Content-type: {2}", _
                UploadTest.FileName, _
                UploadTest.FileBytes.Length, _
                UploadTest.PostedFile.ContentType)
        ' Save the file
        Dim filePath As String = _
            Server.MapPath("~/Brochures/" & UploadTest.FileName)
        UploadTest.SaveAs(filePath)
    End If
End Sub

Kontrol FileUpload menyediakan berbagai properti untuk bekerja dengan data yang diunggah. Misalnya, HasFile properti menunjukkan apakah file diunggah oleh pengguna, sementara FileBytes properti menyediakan akses ke data biner yang diunggah sebagai array byte. Penanganan Click aktivitas dimulai dengan memastikan bahwa file telah diunggah. Jika file telah diunggah, Label menampilkan nama file yang diunggah, ukurannya dalam byte, dan jenis kontennya.

Catatan

Untuk memastikan bahwa pengguna mengunggah file, Anda dapat memeriksa HasFile properti dan menampilkan peringatan jika , Falseatau Anda dapat menggunakan kontrol RequiredFieldValidator sebagai gantinya.

FileUpload menyimpan SaveAs(filePath) file yang diunggah ke filePath yang ditentukan. filePath harus berupa jalur fisik (C:\Websites\Brochures\SomeFile.pdf) daripada jalur virtual(/Brochures/SomeFile.pdf). MetodeServer.MapPath(virtPath) mengambil jalur virtual dan mengembalikan jalur fisik yang sesuai. Di sini, jalur virtual adalah ~/Brochures/fileName, di mana fileName adalah nama file yang diunggah. Lihat Methos Server.MapPath untuk informasi selengkapnya tentang jalur virtual dan fisik dan menggunakan Server.MapPath.

Setelah menyelesaikan Click penanganan aktivitas, luangkan waktu sejenak untuk menguji halaman di browser. Klik tombol Telusuri dan pilih file dari hard drive Anda lalu klik tombol Unggah File yang Dipilih. Postback akan mengirim isi file yang dipilih ke server web, yang kemudian akan menampilkan informasi tentang file sebelum menyimpannya ke ~/Brochures folder. Setelah mengunggah file, kembali ke Visual Studio dan klik tombol Refresh di Penjelajah Solusi. Anda akan melihat file yang baru saja Anda unggah di folder ~/Brochures!

File EvolutionValley.jpg Telah Diunggah ke Server Web

Gambar 14: File EvolutionValley.jpg Telah Diunggah ke Server Web (Klik untuk melihat gambar ukuran penuh)

EvolutionValley.jpg Disimpan ke Folder ~/Brosur

Gambar 15: EvolutionValley.jpg Disimpan ke ~/Brochures Folder

Seluk-beluk dengan Menyimpan File yang Diunggah ke Sistem File

Ada beberapa seluk beluk yang harus ditangani saat menyimpan file unggahan ke sistem file server web. Pertama, ada masalah keamanan. Untuk menyimpan file ke sistem file, konteks keamanan tempat halaman ASP.NET dijalankan harus memiliki izin Tulis. Server Web Pengembangan ASP.NET berjalan di bawah konteks akun pengguna Anda saat ini. Jika Anda menggunakan Microsoft s Layanan Informasi Internet (IIS) sebagai server web, konteks keamanan bergantung pada versi IIS dan konfigurasinya.

Tantangan lain untuk menyimpan file ke sistem file berputar di sekitar penamaan file. Saat ini, halaman kami menyimpan semua file yang diunggah ke ~/Brochures direktori menggunakan nama yang sama dengan file di komputer klien. Jika Pengguna A mengunggah brosur dengan nama Brochure.pdf, file akan disimpan sebagai ~/Brochure/Brochure.pdf. Tetapi bagaimana jika beberapa saat kemudian Pengguna B mengunggah file brosur berbeda yang kebetulan memiliki nama file yang sama (Brochure.pdf)? Dengan kode yang kita miliki sekarang, file Pengguna A akan ditimpa dengan unggahan Pengguna B.

Ada sejumlah teknik untuk mengatasi konflik nama file. Salah satu opsinya adalah melarang pengunggahan file jika sudah ada dengan nama yang sama. Dengan pendekatan ini, ketika Pengguna B mencoba mengunggah file bernama Brochure.pdf, sistem tidak akan menyimpan file mereka dan sebaliknya menampilkan pesan yang memberi tahu Pengguna B untuk mengganti nama file dan mencoba lagi. Pendekatan lain adalah menyimpan file menggunakan nama file unik, yang bisa menjadi pengidentifikasi unik global (GUID) atau nilai dari kolom kunci utama rekaman database yang sesuai (dengan asumsi bahwa unggahan dikaitkan dengan baris tertentu dalam model data). Dalam tutorial berikutnya kita akan menjelajahi opsi ini secara lebih rinci.

Tantangan yang Terlibat dengan Data Biner Dalam Jumlah Sangat Besar

Tutorial ini mengasumsikan bahwa data biner yang diambil berukuran sederhana. Bekerja dengan sejumlah besar file data biner yang beberapa megabyte atau lebih besar memperkenalkan tantangan baru yang berada di luar cakupan tutorial ini. Misalnya, secara default ASP.NET akan menolak unggahan lebih dari 4 MB, meskipun ini dapat dikonfigurasi melalui <httpRuntime> elemen di Web.config. IIS memberlakukan batasan ukuran pengunggahan filenya sendiri juga. Selain itu, waktu yang diperlukan untuk mengunggah file besar mungkin melebihi default 110 detik ASP.NET akan menunggu permintaan. Ada juga masalah memori dan performa yang muncul saat bekerja dengan file besar.

Kontrol FileUpload tidak praktis untuk unggahan file besar. Saat konten file sedang diposting ke server, pengguna akhir harus menunggu dengan sabar tanpa konfirmasi bahwa unggahan mereka mengalami kemajuan. Ini tidak terlalu banyak masalah saat berhadapan dengan file yang lebih kecil yang dapat diunggah dalam beberapa detik, tetapi dapat menjadi masalah saat berhadapan dengan file yang lebih besar yang mungkin memakan waktu beberapa menit untuk diunggah. Ada berbagai kontrol pengunggahan file pihak ketiga yang lebih cocok untuk menangani unggahan besar dan banyak dari vendor ini memberikan indikator kemajuan dan manajer pengunggahan ActiveX yang menyajikan pengalaman pengguna yang jauh lebih dipolihkan.

Jika aplikasi Anda perlu menangani file besar, Anda harus menyelidiki tantangan dengan cermat dan menemukan solusi yang sesuai untuk kebutuhan khusus Anda.

Ringkasan

Membangun aplikasi yang perlu menangkap data biner memperkenalkan sejumlah tantangan. Dalam tutorial ini kami menjelajahi dua yang pertama: memutuskan tempat untuk menyimpan data biner dan memungkinkan pengguna untuk mengunggah konten biner melalui halaman web. Selama tiga tutorial berikutnya, kita akan melihat cara mengaitkan data yang diunggah dengan rekaman dalam database serta cara menampilkan data biner bersama bidang data teksnya.

Selamat Pemrograman!

Bacaan lebih lanjut

Untuk informasi selengkapnya tentang topik yang dibahas dalam tutorial ini, lihat sumber daya berikut:

Tentang Penulis

Scott Mitchell, penulis tujuh buku ASP/ASP.NET dan pendiri 4GuysFromRolla.com, telah bekerja sama dengan teknologi Microsoft Web sejak 1998. Scott bekerja sebagai konsultan, pelatih, dan penulis independen. Buku terbarunya adalah Sams Teach Yourself ASP.NET 2.0 dalam 24 Jam. Dia dapat dijangkau di mitchell@4GuysFromRolla.com.

Terima kasih khusus untuk

Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Peninjau utama untuk tutorial ini adalah Teresa Murphy dan Bernadette Leigh. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.