Pazartesi , 20 Kasım 2017

Asp.Net Fileupload Bileşeninin Özelleştirilmesi

Asp.Net tarafında en sık kullanılan kontrollerden bir tanesi de File Upload kontrolüdür. Bildiğiniz gibi bu kontrol seçilen bir dosyanın server’a yüklenmesi için kullanılmakta ve Render edilirken bir input nesnesi olarak render edilip type özelliği file olarak seçilir. Kullanımı basit olan bu kontrol sayfa üzerinde görüntüenirken kullanılan tarayıcı ve işletim sistemine bağlı olarak farklı şekillerde görüntülenir.

File Upload 1

 

Standart olarak render edilmeyen bu kontrolle ilgili sık sorulan soru, dosya seçmek için kullanacağımız butonun text özelliğini nasıl değiştirebileceğimizdir. File Upload kontrolünün bunu destekleyen bir özelliği halihazırda yok. Fakat dolaylı yoldan javascript kullanılarak ikinci bir buton nesnesi vasıtasıyla bunu yapabiliriz. Şimdi örnek olması açısından sayfamıza bir tane file upload kontrolü ekleyelim. Fileupload kontrolümüzün butonun görünmemesi için style özelliğinden visibilty özelliğini hidden yapalım. Bu değişliği yaptıktan sonra ekranda Fileupload kontrolümüz görünmeyecek. Bu sebeple bu kontroldeki butonun click olayını başka bir butonun onclientclick eventine bir javascript methodu yazarak değiştirebiliriz. Bu sebeple sayfamıza bir buton ve aşağıdaki gibi javascript methodumuzu ekleyelim.

File Upload 2

Yukarıdaki gibi formumuzu oluşturduğumuzda çıktımız aşağıdaki gibi olacaktır.

File Upload 3

Yukarıdaki resime dikkat ederseniz fileupload kontrolümüz şuan görünmüyor fakat render edildiği için sayfada yer kaplıyor ve eklediğimiz ikinci buton sayfanın ortasında görünüyor. Fileupload kontolümüzün style özelliğinden width:0, height:0 ve display:block özelliklerini atadığımızda kodumzun son hali ve çıktımız aşağıdaki gibi olacaktır.

File Upload 4

File Upload 5

 

Hakkında ismailadar

Cevapla

E-posta adresiniz yayınlanmayacak. Required fields are marked *

*


*

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>