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    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”]

[/code]

[code lang=“js”]

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); [/code]

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

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

//codepen.io/assets/embed/ei.js

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”]

[/code]

[code lang=“js”]

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('

', escape(f.name), ’ (’, f.type || ‘n/a’, ’) - ’, f.size, ’ bytes, last modified: ’, f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : ‘n/a’, '

'); } document.getElementById(‘list’).innerHTML = '

' + output.join(”) + '

'; }

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); [/code]

Canlı örneği ile sonuçları görebilirsiniz: See the Pen qCJxD by Ibrahim Nergiz (@PhyesiX) on CodePen.//codepen.io/assets/embed/ei.js

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”]

[/code]

[code lang=“js”]

// 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 = [''].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); [/code]

Canlı örnek için:

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

//codepen.io/assets/embed/ei.js