Ajax ile Resim Yükleme

Bazı arkadaşların ajax formlarında dosya yüklerken çok ilginç teknikler kullandığına şahit oldum. Iframe refresh ederek resmi o iframe üzerinden yüklemeye çalışıp, resmin veya dosyanın bilgilerini kayıt formuna yönlendirerek kayıt işlemini gerçekleştirmek hakikatten zaman ve performans kaybı. Bu teknik sadece resim için değil bütün dosyalar için geçerlidir.

jQuery Kısmı

$(document).on("submit", "form", function (e) {
  var $data = new FormData(this);
  $.ajax({
    url: "./upload.aksiyon.php",
    data: $data,
    contentType: false,
    processData: false,
    type: "POST",
    success: function (xhr) {
      $("#sonuc").html(xhr);
    }
  });
});

<h2>Ajax Dosya Yükleme Formu</h2>
<form action="javascript:void(0);" name="dosyayukle" id="dosyayukle" enctype="multipart/form-data">
  <input type="file" name="dosya" id="dosya" />
  <input type="submit" value="Yükle" />
  </form>
  <br />
  <pre id="sonuc"></pre>
</form>