Genel Dosya Yükleme Yöntemleri ve Örnekleri

  • 15.18.2015
  • tayyipyetis
  • ASP.Net

file uploadMerhaba arkadaşlar, bu makalemde web sitenizi profesyonel ve kullanışlı hale getiren güzel bir kod örneğini açıklayacağım. Çoğumuz çeşitli projelerde dosya yüklemeye ihtiyaç duymuşuzdur bu bazen profil resmi için olabilir bazen paylaşım amaçlı herhangi bir dosya bu işlemi yapabilmek için bir çok yöntem var biz bu makalede en az masraflı ve en kolay kullanımdan bahsedeceğiz fakat diğer başlıca yöntemlerin neler olduğunu görmek yaptığımız işin kalitesini anlamamıza fayda sağlar. Önce yöntemleri kısaca tanıtıp sonra her biri için örnekleriyle detaylı anlatıma geçelim. En basitinden başlamak gerekirse;

  1. Asp.net File Upload kontrolü ile dosya yüklemek; tek seferde en fazla bir dosya yükleyebilirsiniz. dosyayı seçtikten sonra bir submit(html yada .net olabilir) butonuna basmanız gerekir çünkü kontrolün içinde bulunduğu formun sunucuya post edilmesi gerekir. buradan anlaşılacağı üzere kullanıcı dosya yüklenene kadar siteyle hiçbir etkileşimde bulunamaz ve dosya yüklenmesi diğer form elementlerinin gereksiz yere post edilmesinden dolayı daha yavaş olur.
  2. Html İnput File ile dosya yüklemek; asp.net file upload kontrolünden tek farkı aynı anda birden fazla dosya seçmeye ve yüklemeye imkan sağlamasıdır (multiple="multiple") fakat tüm formun post edilmesi vs. gereksiz işlemlerin yapılması durumu bu yöntemde de geçerlidir
  3. Jquery.form.js eklentisi ile dosya yüklemek; Bir jquery kütüphanesi olmakla birlikte kullanışlı iş görür bir yöntemdir. normal bir html formunu bu eklentiye tanıtarak post işlemini ajax tabanlı yapmanızı sağlar dolayısıyla sadece dosya gönderim işlemi için javascript ile çok az uğraşırsınız fakat bu eklentinin pozitif tarafı ise progresschange işlemini yani formun byte cinsinden toplam boyutunu, ne kadarının ya da yüzde kaçının gönderildiğini size anlık olarak vermesidir ki bu işinize profesyonellik katar kullanıcıya bilgi vererek onu sıkmadan dosya yükleme işlemi yapmanıza olanak verir fakat bu makalenin ana konusu olamamasının sebebi tabiatı itibariyle bir eklenti olması haricen bir js yüklemek gerekmesidir. Bu dezavantajlar bu eklentinin kullanılmaması gerektiği şeklinde algılanmamalıdır zira bazı durumlarda en makntılı yöntem bu olabilir.
  4. FormData kullanarak dosya yükleme işlemi; Bu makalenin ana konusu olmakla birlikte bir javascript sınıfı olan FormData'yı kullanarak manuel bir form verisi oluşturup bunu ajaxla post etmekten ibarettir. yöntem kolay ve kullanışlıdır.

 

FormData ve XMLHttpRequest Kullanarak Dosya Yükleme İşlemi

FormData kullanarak basit bir dosya yükleme işlemi yapalım. bu örnekte minimum ekipman kullanmak için jquery ajax kullanmayacağım direkt Javascript sınıfı olan XMLHttpRequest nesnesini kullanacağım. 

<input id="dosya" type="file" name="f" onchange="myFunction()" />

<script>
 function myFunction() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
     if (xhr.readyState == 4 && xhr.status == 200) {
        alert("başarılı");
     }
    };
    var formData = new FormData();
    formData.append("deg", "aliveli")
    formData.append("file", $("#dosya")[0].files[0]);
    xhr.open("POST", "/default.aspx", true);
    xhr.send(formData);
 }
</script>

.Net tarafında ise aşağıdaki gibi dosyaya ulaşabilirsiniz

if (Request.Files.Count > 0) {
 HttpPostedFile dosya = Request.Files(0);
 dosya.SaveAs(Server.MapPath("/") + "/dosyalar" + dosya.FileName);
}

FormData ve AJAX Kullanarak Dosya Yükleme İşlemi

Yukarıdaki örneği yapmamın sebebi ajax mantığını daha iyi anlatmak istememdi çünkü ajax da nihayetinde XMLHttpRequest nesnesini kullanarak çalışır fakat genel olarak kullanılmasının sebebi gerekli ayarlamaları bizim yerimize yapabiliyor olmasıdır. şimdi örneğimizi yapalım

function dosyayukle(filenesnesi) {
    var formdata = new FormData();
    formdata .append("dosya", filenesnesi);
    $.ajax({
       url: "default.aspx",
       type: "POST",
       data: formdata,
       processData: false,
       contentType: false,
       success: function(response) {
           alert("gönderim başarılı");
       },
       error: function(response) {
           alert("bir hata meydana geldi");
       }
    });
}  

Bu şekilde jquery ajax kullanarak dosyanızı gönderebilirsiniz. normal gönderimden farkı processData: false ve contentType: false ayarlamalarınızı yapmanız gerektiğidir.

JQuery.form.js ile Dosya Yükleme İşlemi

Aşağıdaki örnek kodu inceleyin.JQuery eklentisini buradan indirin.jquery.form.min.js (14,18 kb)

<form id="dosyayukle" method="post" enctype="multipart/form-data">
 <input type="file" name="file"/>
</form>
<script>
  $(document).ready(function () {
   $("#dosyayukle").ajaxForm({
    beforeSend: function () {
      //Gönderim yapılmadan önce
    },
    uploadProgress: function (olay, yuklenen, toplam, yuzde) {
      //Yükleme yapılırken
    },
    success: function () {
      //Yükleme başarılıyken
    },
    complete: function (response) {
      //İşlem tamamlandığında
    },
    error: function () {
      //Bir hata olduğunda
    }
  });
});

Yukarıdaki formu submit ettiğinizde dosyalarınız ajax ile gönderilecek ve ajaxform olayları tetiklenecektir.

HTML İnput File ile dosya yükleme işlemi

Aşağıdaki şekilde html input file kullanarak çoklu dosya yükleme işleminin gerçekleştirebilirsiniz

<form id="form" action="/default.aspx" method="post">
 <input type="file" name="file" multiple="multiple"/>
 <input type="submit" value="Dosyayı Gönder"/>
</form>

ASP.Net File Upload ile Dosya Yükleme İşlemi

Aşağıdaki şekilde asp.net file upload kontrolü ile dosya tekli dosya yükleme işlemi gerçekleştirebilirsiniz

<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" />

Umarım faydalı olmuştur.

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Yap