Ajax Dosya Yükleme

JQuery-tr Wiki sitesinden

Web uygulamalarında özellikle dosya yükleme konusu belki de en çok zorluklarla karşılaştığımız bir uygulama türüdür. Adım adım anlatalım...

1. HTML Tarafı

1.1. Form Dosyayı seçeceğimiz formu oluşturuyoruz.

<form id="form2" name="form2" action="upload_do.asp?cmd=DoUpload" 
method="post" enctype="multipart/form-data" 
target="doUpload" class="UploadAction">
	<input type="file" name="file1" width="10"  />
	<input type="submit" value="Yükle" class="grey" />
</form>

Dikkat edilecek noktalar - target="doUpload": Upload işlemini gerçekleştirecek olan iframe'i işaret ediyoruz. Aşağıda doUpload adlı iframe'i göreceksiniz. - class="UploadAction": Bu class'a sahip olan formları upload işlemi için tanımlıyoruz Jquery seçicileri ile.

1.2. Iframe Sayfada herhangi bir yere -Kod yazarken görme açısından form'a yakın bir yerde olursa iyi olur- iframe'i açıyoruz ama style="display:none;" ile de gizliyoruz.

<iframe id="doUpload" name="doUpload" style="display:none;"></iframe>

1.3. Sonuç Metni Aşağıdaki div'in içine de önce "işlem yapılıyor" ibaresini sonra da işlemin sonucunu yazdıracağız.

	<div id="uploader"></div>

2. JqueryScript

Aslında böyle bir tabir yok ama Jquery'den yararlandığımı göstermek için Jquery+Javascript olarak adlandırdım.

2.1. Yükleme işlemini anime etme ve ajax görüntüsü kazandırma

$(document).ready(UploadAction);
function UploadAction()
	{
		$(".UploadAction").submit(function(){
		  $('.UploadAction').unbind().hide();
		  $('#uploader').append("<img src='../img/loading.gif' width='208' height='13' />");
		});
	}

Kullanılan ifadeler - $(".UploadAction").submit(function(): Yukarıda belirttiğimiz ".UploadAction" class'ına sahip olan formu seçiyoruz ve submit edildiğinde aşağıdaki fonksiyonu çalıştırıyoruz. - $('.UploadAction').unbind().hide(): Formu gizliyoruz. - $('#uploader').append("<img src='../img/loading.gif' width='208' height='13' />"): Formu gizledikten sonra hemen altındaki uploader adlı div'in içine animasyonu koyuyoruz.

2.2. Yükleme işlemi bitince sonuç bildirme. Aşağıdaki kodu upload_do.asp'nin içine koymalıyız ki yükleme işlemini yapan sayfa yüklendiğinde sonucu bildirsin bize...

	$(document).ready(function(){
	$("#uploader", parent.document.body).empty().append('<%=arr_Errors(que_Err)%>');
	$("#ProfileImage", parent.document.body).attr({src:2.jpg?id=<%=Fn_Randomnumber(8,1)%>});
	});

Kullanılan ifadeler - $("#uploader", parent.document.body).empty().append('Dosya Yüklendi'): Uploader adlı div'in içinde animasyon olduğu için önce empty ile temizliyoruz.Sonra da içine "Dosya Yüklendi" yazıyoruz.

--Harun Saraç --[ http://www.harunsarac.com]