HTML5 ile FileReader ( File API )

HTML5 ile yeni gelen özelliklerden birisi de lokaldeki dosyalarla etkileşim içerisine girebilmemiz ve bunu da File API ile yapabilmemiz olsa gerek. File API ile gelen özelliklerden birkaçından bahsetmek istersem; herhangi bir imajın önizlemesini sunucuya göndermeden anında görebilmek, dosya içeriğini ( düzenlenme tarihi, ismi, boyutu … vs ) görebilmek gibi bir çok şeye izin veriyor. Güncel browserın desteği bulunmakla birlikte bu özelliği:

[code lang=”js”]
if (window.File && window.FileReader && window.FileList && window.Blob) {
alert(‘File API destekleniyor.’);
} else {
alert(‘File API desteklenmiyor.’);
}
[/code]

Yukarıdaki kod bloğu yardımıyla kullanıcının browserinin File API destekleyip desteklemediğini öğrenebiliriz.

Form içerisinde Input Kullanımı

Dosya seçimi için form içerisinde standart olarak  <input type=”file” />  kod bloğunu kullanıyoruz. Javascript seçilen dosyaların listesini FileList adı altında dönüyor. Aşağıda da ‘multiple’ yani çoklu dosya seçimi olan bir form örneğini görebilirsiniz:

[code lang=”html”]
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
[/code]

[code lang=”js”]
<script>
function handleFileSelect(evt) {
var files = evt.target.files;

var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push(‘<li><strong>’, escape(f.name), ‘</strong> (‘, f.type || ‘n/a’, ‘) – ‘,
f.size, ‘ byte, son düzenlenme: ‘,
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : ‘n/a’,
‘</li>’);
}
document.getElementById(‘list’).innerHTML = ‘<ul>’ + output.join(”) + ‘</ul>’;
}

document.getElementById(‘files’).addEventListener(‘change’, handleFileSelect, false);
</script>
[/code]

Canlı örneği ile sonuçları görebilirsiniz:

See the Pen BLuln by Ibrahim Nergiz (@PhyesiX) on CodePen.

Form içerisinde Sürükle Bırak

Aşağıda da browser desteği ile sunulan drag and drop ( sürükle bırak ) yönetmiyle, form içerisine dosyalarınızı sürükleyerek oluşturduğunuz bir form:

[code lang=”html”]
<div id="drop_zone">Sürükle Bırak</div>
<output id="list"></output>
[/code]

[code lang=”js”]
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();

var files = evt.dataTransfer.files; // FileList object.

// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push(‘<li><strong>’, escape(f.name), ‘</strong> (‘, f.type || ‘n/a’, ‘) – ‘,
f.size, ‘ bytes, last modified: ‘,
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : ‘n/a’,
‘</li>’);
}
document.getElementById(‘list’).innerHTML = ‘<ul>’ + output.join(”) + ‘</ul>’;
}

function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = ‘copy’; // Explicitly show this is a copy.
}

// Setup the dnd listeners.
var dropZone = document.getElementById(‘drop_zone’);
dropZone.addEventListener(‘dragover’, handleDragOver, false);
dropZone.addEventListener(‘drop’, handleFileSelect, false);
</script>
[/code]

Canlı örneği ile sonuçları görebilirsiniz: See the Pen qCJxD by Ibrahim Nergiz (@PhyesiX) on CodePen.

Dosyaları Okumak

En güzel bölüm de burası. Hani anında önizleme özelliği var ya … Formumuzda bulunan input yardımıyla dosyamızıı seçip FileReader yardımıyla objeyi bellek içerisinden okuyabiliyoruz. FileReader komutuyla dosya özelliğini okumak için 4 farklı şekil mevcut:

  • FileReader.readAsBinaryString : Dosyayı binary ile görüntüler
  • FileReader.readAsText : Dosyayı text olarak okur. Text ‘UTF-8’ olarak sunulur.
  • FileReader.readAsDataURL: dataURL’i sunar.
  • FileReader.readAsArrayBuffer: ArrayBuffer olarak sunar.

Bunların yanında onloadstart, onprogress, onload, onabort, onerror ve onloadend gibi seçenekler yardımıyla da dosyamızın durumunu görebiliriz. Durumuna göre de fonksiyonlar tetikleyebiliriz … Aşağıdaki kod bloğunda seçilen imajın: FileReader.readAsDataURL yardımıyla url’ini alıp, img src içerisine yazdıralım ve sonucu aşağıda canlı canlı görelim:

[code lang=”html”]
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
[/code]

[code lang=”js”]
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

// Only process image files.
if (!f.type.match(‘image.*’)) {
continue;
}

var reader = new FileReader();

// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement(‘span’);
span.innerHTML = [‘<img class="thumb" src="’, e.target.result,
‘" title="’, escape(theFile.name), ‘"/>’].join(”);
document.getElementById(‘list’).insertBefore(span, null);
};
})(f);

// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}

document.getElementById(‘files’).addEventListener(‘change’, handleFileSelect, false);
</script>
[/code]

Canlı örnek için:

See the Pen tkesc by Ibrahim Nergiz (@PhyesiX) on CodePen.