Zeki AKDOĞAN - Kişisel web sitesi

Jquery,Generic Handler ve Uploadify Kullanarak Çoklu Dosya Upload İşlemi

Ç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:

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);
}

JQuery de Efekt Fonksiyonları (Effects)

show() – Saklı olan bir nesne veya nesneleri görünür yapmaya yarar. Mesela loaderGif id li img i show etmek için $(“#loaderGif”).show();

show( speed, [callback] ) - Show işlemini istediğimiz hızda yapmamızı yarar. Speed değeri olarak slow,normal yada fast değeri alabilir. Yada milisaniye cinsinden de değer vermek mümkündür. Mesela sayfada ki paragrafları hızlı biçimde show yapalım. $("p").show("slow");

hide() – Görünür olan bir nesne veya nesneleri saklamaya yarar. Mesela loaderGif id li img i hide etmek için $(“#loaderGif”).hide();

hide( speed, [callback] ) - Hide işlemini istediğimiz hızda yapmamızı yarar. Speed değeri olarak slow,normal yada fast değeri alabilir. Yada milisaniye cinsinden de değer vermek mümkündür. Mesela sayfada ki paragrafları hızlı biçimde hide yapalım. $("p").hide("slow");

toggle() – Saklı olan bir nesneyi göstermeye, görünür olan bir nesneyi saklamaya yarar. Misal bir butona basıldığında loaderGif saklansın, tekrar basıldığında görünür hale gelsin.

1
$("#button1").click(function () { 

2
  $("#loaderGif").toggle(); 

3
});

toggle( switch ) – Switch değeri true ise elemanlar hide olur, false ise elemanlar show olur.

toggle( speed, [callback] ) - Toggle işlemini hide veya show da ki gibi belli bir hızla yapmaya yarar. Gene hız değeri olarak slow,normal yada fast değeri alabilir. Örneğin loaderGif i yavaş bir biçimde toggle layalım. $(“loaderGif”).toggle(“slow”);

slideDown( speed, [callback] ) – Verilen hızda istenen nesneleri aşağıya doğru açılarak göstermeye yarar. Örneğin $("#loaderGif").slideDown("slow");

slideUp( speed, [callback] ) – Verilen hızda istenen nesneleri yukarıya doğru kapanarak saklamaya yarar. Örneğin $("#loaderGif").slideUp("slow");

slideToggle( speed, [callback] ) – Verilen hızda nesneyi slide olarak toggle yapmaya yarar. Toggle ile çalışma mantığı aynı şekildedir. Örneğin $("#loaderGif").slideToggle("slow");

fadeIn( speed, [callback] ) – Verilen hızda istenen nesneleri opacity lerini arttırarak göstermeye yarar. Örneğin $("#loaderGif").fadeIn("slow");

fadeOut( speed, [callback] ) – Verilen hızda istenen nesneleri opacity lerini azaltarak saklamaya yarar. Örneğin $("#loaderGif").fadeOut("slow");

fadeTo( speed, opacity, [callback] ) - Verilen hızda istenen nesnelerinin opacity lerini verilen değer yapar. Örneğin $("#loaderGif").fadeTo("slow",0.33);

jQuery.fx.off – Bütün animasyonları disable etmeye yarar. disable etmek için jQuery.fx.off = true;, tekrar enabled etmek için jQuery.fx.off = false;

Kaynak:http://www.turgaysahtiyan.com

Jquery kullanarak İlk tıklamadan sonra butonu disable etme

$("form").submit(function() {

$(":submit", this).attr("disabled", "disabled");

});

</script>

Jquery kullanarak asp.net sayfalarında web servis çalıştırma

Öncelikle Sayfamıza jquery kütüphanesini import etmemiz gerekiyor.

Daha sonra sayfamızda kullanacağımız javascript kodlarımız.

function getir(al, yaz) {

var formVeri = '{ipadresi:"' + al + '"}';

$.ajax({

type: "POST", //Post metodunu kullanacağımızı belirtiyoruz.

url: "statistics.aspx/bilgigetir", //Web servisimizin bulunduğu sayfa ve servis adı

data: formVeri,

contentType: "application/json; charset=utf-8",

dataType: "json",

error: function() { $('#result').html("Bir hata algılandı: " + Error); },

success: function(msg) {

$("#" + yaz).html(msg.d);

}

});

}

</script>

Aşağıdada HTML kontrolümüz ve onclick olayında javascriptimizi çağıracak fonksyonumuz.Onclick olayında 2 parametremiz var, birinci parametre bilgileri alınacak ip adresini, ikinci parametre ise sonucu göstermek istediğimiz html kontrolü.

CODEBEHİND tarafına gelirsek, öncelikle aşağıdaki kütüphaneleri sayfamıza eklememiz gerekiyor;

using System.Web.Services;

using System.Xml;

Veeeeee Web metodumuz…

[WebMethod]

public static string bilgigetir(string ipadresi)

{

string url = "http://www.ipmango.com/api.php?ip=" + ipadresi;

XmlDocument xmlDocument = new XmlDocument();

xmlDocument.Load(url);

System.Xml.XmlNode xnIpadresi = xmlDocument.SelectSingleNode("//www.ipmango.com//ipaddress");//

System.Xml.XmlNode xncity = xmlDocument.SelectSingleNode("//www.ipmango.com//city");//

System.Xml.XmlNode xnregion = xmlDocument.SelectSingleNode("//www.ipmango.com//region");//

System.Xml.XmlNode xncountryname = xmlDocument.SelectSingleNode("//www.ipmango.com//countryname");//

System.Xml.XmlNode xnlatitude = xmlDocument.SelectSingleNode("//www.ipmango.com//latitude");//

System.Xml.XmlNode xnlongitude = xmlDocument.SelectSingleNode("//www.ipmango.com//longitude");//

System.Xml.XmlNode xncurrency = xmlDocument.SelectSingleNode("//www.ipmango.com//currency");//

string metin = "İp: " + xnIpadresi.InnerText + "</br>";

metin += "Şehir: " + xncity.InnerText + "</br>";

metin += "Bölge: " + xnregion.InnerText + "</br>";

metin += "Ülke: " + xncountryname.InnerText + "</br>";

metin += "Enlem: " + xnlatitude.InnerText + "</br>";

metin += "Boylam: " + xnlongitude.InnerText + "</br>";

metin += "Para Birimi: " + xncurrency.InnerText;

return "<br/><br/><strong>İp İstatistikleri</strong><br></br>" + metin;

}

Jquery,Generic Handler ve Uploadify Kullanarak Çoklu Dosya Upload İşlemi

JQuery de Efekt Fonksiyonları (Effects)

Jquery ile Validation,ColorTip,Slider Örnekleri

Jquery kullanarak İlk tıklamadan sonra butonu disable etme

Jquery kullanarak asp.net sayfalarında web servis çalıştırma