HTML5 File ve FileReader API'leri kullanarak resim içeriğini Drag & Drop ile almak

HTML5 ile gelen yeniliklerden birisi de File ve FileReader API. Bu W3C'nin sunduğu bu API sayesinde lokal dosya sistemdeki bir dosyalara JavaScript erişimi sağlanıyor. Eriştiğiniz dosyanın içeriğini okuduktan sonra yapılabilecekler hayal gücünüze kalmış oluyor.

Bu eğer tarayıcınız bu API'yi destekliyorsa aşağıdaki kutuda küçük bir demo yapabilirsiniz. Masaüstünüzden bir resmi aşağıdaki çerçeve içine sürükleyip bırakın ve tarayıcınızın -sunucuya yükleme yapmadan- dosya içeriğini okuyarak arkaplan olarak döşemesini görün.

File API & FileReader API desteklenmiyor

Yukarıdaki örnekte kullanılan HTML aşağıdaki gibidir. Burada stilleri vermiyorum, isteyen bu sayfadaki stilleri sayfa kaynağına bakarak zaten kullanabilir.

<article>
  <div id="holder"></div>
  <div id="status">File API & FileReader API desteklenmiyor</div>
</article>

Bu örnekle ilgili kullanılan JavaScript kodu aşağıdaki gibidir.

var holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader === 'undefined') {
  state.className = 'fail';
} else {
  state.className = 'success';
  state.innerHTML = 'File API & FileReader destekleniyor';
}
 
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();

  var file = e.dataTransfer.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
    console.log(event.target);
    holder.style.background = 'url(' + event.target.result + ') no-repeat center';
  };
  console.log(file);
  reader.readAsDataURL(file);

  return false;
};