Çalıştığım şirkette web üzerinden dosya gönderimi yapılmasına izin veren bir uygulama yazmam istendi, daha önceden ASP.NET te FileUpload nesnesini kullanarak birçok kez upload işlemini gerçekleştiren uygulama yazmama rağmen, busefer bu işi jquery ile yapmaya karar verdim ve nette biraz araştırma yaptım. Araştırmalarım sonrası upload işlemini yapabileceğim, kullanımı çok kolay olan Uploadify 'a rastladım. Uploadify hakkında ayrıntılı bilgiye buradan erişebilirsiniz.
Nette Uploadify hakkında türkçe olarak fazla kaynağa rastladığım söyelenemez, açıkçası çok fazla kaynağa ihtiyaç olduğuda söylenemez :) ama ben genede bu konuda belki benden sonra bu konuda araştırma yapıp bilgi edinmek isteyenlere yararlı olması sebebiyle birşeyler yazmaya karar verdim.
Öncelikle buradan gerekli dosyaları indirmeniz gerekiyor.
Uploadify-v2.1.4.zip Dosyanın içerikleri aşağıdaki gibi.
Uploadify.swf
Uploadify.php
uploadify.fla
uploadify.css
uploadify.allglyphs.swf
swfobject.js
jquery-1.4.2.min.js
jquery.uploadify.v2.1.4.min.js
jquery.uploadify.v2.1.4.js
expressInstall.swf
check.php
cancel.png
Yukarıdaki dosya sayısı çok gibi görünsede işimize aranlar sadece aşağıdakiler.
Uploadify.swf => Flash dosyası
uploadify.fla => Ham Flash dosyası
uploadify.css => Style dosyası(isterseniz içindeki stilleri kendi css dosyanıza ekleyebilirsiniz)
swfobject.js => Sayfamıza flash eklemek için kullanışlı bir js. Ayrıntılı bilgiye buradan erişebilrisiniz.
jquery-1.4.2.min.js => Jquery
jquery.uploadify.v2.1.4.min.js => Uploadify Jquery eklentisi.
jquery.uploadify.v2.1.4.js
cancel.png => İptal resmi
Biz projemizde ASP.NET kullanacağımız için php dosyalarına ihtiyacımız yok.
HTML kısmında <head></head> tagları arasında kullanacağımız kodlar:
<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="css/uploadify.css" />
<script type="text/javascript">
$(document).ready(function () { $("#<%=fuFile.ClientID %>" ).uploadify({
'uploader': 'scripts/uploadify.swf' ,
//Uploadify dosyasının yolu
'cancelImg': 'images/cancel.png' ,
//İptal resminin dosyasının yolu
'buttonText': 'Dosya Sec' ,
//Flash butonun üzerinde görünecek yazı(Türkçe karaşter kullanmayın)
'script': 'Upload.ashx',
//Upload işlemini yapacak olan generic handler sayfasının yolu
'folder': 'UploadFiles',
//Dosyaların yükleneceği dizin adı(İsterseniz generic handler kısmında elle yazarsınız)
'fileDesc': 'Zip Files (.zip, .rar)',
//Dosya seçimi yaparken açıklamada görünecek kısım
'fileExt': '*.rar;*.zip;',
//Upload için izin verilen uzantılar *.*; yaparsanız tüm dosyaları upload yapabilirsiniz
'multi': true,
//Çoklu upload işlemine izin verip verilmeyeceği
'sizeLimit': 1024 * 1024 * 20,
//Maximum upload yapılabielek dosya boyutunu (Byte cinsinden)
'queueSizeLimit': 10,
//Aynı anda kaç dosyayı upload yapabileceğinizi belirttiğiniz kısım
'onError': function(a, b, c, d) { if(d.status == 404) alert(
//Bir hata oluştuğunda çalışacak olan script
"Script Yüklenemedi. Olması gereken path: " + "<?= getcwd() ?>");
else if (d.type === "HTTP") alert("Hata " + d.type + ": "+ d.status);
else if (d.type === "File Size") alert(c.name +"\r\nisimli dosya " + Math.round(d.info / (1024 * 1024)) + "MB limitini aşmaktadır.");
else alert("Hata " + d.type + ": "+ d.text); },
'auto': false,
//Upload işleminin dosya seçildikten sonra otomaik başlaması isteniyorsa true, ben bir butoan basmasını istediğimden false yaptım.
'onAllComplete': function (event, data) {alert('Dosya yüklendi')}
//Upload işlemi başarıyla tamamlandıktan sonra çalışacak script
});
//Diğer parametrelere yukarıda verdiğim linklerden erişebilirsiniz.
</script>
HTML kısmında <body></body> tagları arasında kullanacağımız kodlar:
<asp:FileUpload ID="fuFile" runat="server" />
<input type="button" value="Yükle" onclick="javascript:$('#<%=fuFile.ClientID %>').uploadifyUpload();return false;" />
Generic Handler içerisinde kullanacağımız kodlar:
Bu noktadan sonra Visual Studio ' da projemizde Add New Item diyerek Upload adında Generic Handler ekliyoruz ve aşağıdaki kodları kullanıyoruz.
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Expires = -1;
try
{
HttpPostedFile postedFile = context.Request.Files["Filedata"];
if (System.Text.RegularExpressions.Regex.IsMatch(System.IO.Path.GetExtension(postedFile.FileName), ".rar|.zip"))
{postedFile.SaveAs(savepath + @"\" + postedFile.FileName);
context.Response.Write(tempPath + "/" + postedFile.FileName);
context.Response.StatusCode = 200;
}
}
catch (Exception ex)
{
context.Response.Write("Error: " + ex.Message);
}