JavaScript ile dinamik file upload nesnesi oluşturmak ve silmek.

Merhabalar bu yazıda javascript ile sayfaya dinamik html element ekleme konusuna deyiniyor olacağım. Bu konuya ençok çok dosya ya da

resim upload işlemlerinde ihtiyaç duyarız. Örnek uygulamamızda sayfamıza bir adet html button koyacağız bunun yerine herhangi bir resim  ya

da link de konulabilir. Bu butona her tıklandığında sayfamıza bir adet html file nesnesi eklenecek ve yanına da yine dinaik olarak sil buyonu

eklecek.  Yine hangi file upload elementinin yanındaki sil butonuna tıklanırsa o file upload butonu silinecek.

İlk olarak html ya da aspx sayfamızın body taglarının arasına aşağıdaki html ekleyelim.
 

<input name="Button1" type="button" onclick="FpEkle()" value="Ekle">

<div id="fpmain"></div>

fpmain id li div file elementleri ve butonların ekleneceği alanımız. Şimdi de JavaScirpt  kodu
 

<script type="text/javascript">

var say=1;

function FpEkle()

{

var mydv=document.createElement('div');

mydv.setAttribute('id','fu_'+say);

mydv.innerHTML = '<input  runat=server type=file  /><input  style="width: 100px" type=button value="Sil" 

onclick="sil(' + say + ');" />';

 

document.getElementById('fpmain').appendChild(mydv);

say++;

}

function sil(p)

{

var c=document.getElementById('fu_'+p);

document.getElementById('fpmain').removeChild(c);

 

}

</script>

kodlar bukadar. Bir de açıklama yapalım ki sağdan soldan çalıp yazıyosun demeyin :) :D

İlk olarak say adında bir sayaç tanımaldık bu sayacın görevi eklenen dinamik file elementlerinin ve sil butonlarının içinde bulunacağı div e benzersiz bir id verebilmek.
  Sonra FpEkle fonksiyonu ile her file elemetinin ve sil butonun içinde bulancağı bir div oluşturduk ve bu div e say değeri olan id yi fu_id şeklinde atama yaptık  (örnek : fu_1 , fu_2,fu_3).  sonra oluşturduğumuz bu div ni içerisine  html file ve buton nesnelerini ekledik. elediğimiz sil butonlarının onclick eventinde de aşağıda yazan sil fonksiyonuna  say ' ın  değeri olan sayıyı gönderdik böylece sil butonuna tıklanınca da Sil fonksiyonu bu değere göre gereke div i silecek dolayısıyla file ve buton elementleri de silimiş olcak.  Dinamik oluşan bu div i ve html sayfamız içindeki fpmain id li div e ekliyoruz

sil fonksiyonu da yukarda belirttiğim gibi kendisine gelen değere göre gereken div i siliyor.  İşte Hepsi bu. 
Birde bu örnek uygulama üzerine haklı olarak şöyle bi uyarı  gelebilir .  " Yaw Arkadaşım iyi güzel yapmışın da bi de eklenen tüm dosyları tek seferde  ASP.Net ile  Server a nasıl uplaod edeceğimizi  anlatsana"  .  Bunun için de yine ayrı bir yazı yı çok yakında ASP.net kategorisine ekleyeceğim.
  Çalışan Örneği aşağıdan test edebilrisiniz.

 

 

İyi Çalışmalar

Bunu beğen
Paylaş

Yorumlar
Yorum Yaz
İsim : (*)
E-mail :
Web Adresi:
:
(*)
 
Kapat