HTML5
5. Bölüm : HTML5 File API
File ve FileList nesneleri
<input type="file" id="file1" multiple onchange="filesSelected();" />
<output id="output1"></output>
function filesSelected() {
var fileList = document.getElementById('file1').files; // FileList nesnesi
var result = "Seçilen Dosyalar : ";
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i]; // File nesnesi
result += "Dosya : " + file.name + " (" + file.size + "byte) Dosya Tipi : " + file.type + " Son Güncellenme : " + file.lastModifiedDate;
}
document.getElementById('output1').innerHTML = result;
}
Sürükle bırak ile dosya seçme
Dosyalarınızı buraya sürükleyip bırakın
<div id="fileDropArea">Dosyalarınızı buraya sürükleyip bırakın</div>
<script>
var fileDropArea = document.getElementById('fileDropArea');
fileDropArea.ondragover = function () { this.className = 'hover'; return false; };
fileDropArea.ondragend = function () { this.className = ''; return false; };
fileDropArea.ondrop = function (e) {
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = function (event) {
fileDropArea.style.background = 'url(' + event.target.result + ') no-repeat center';
};
reader.readAsDataURL(file);
return false;
};
</script>
FileReader ile dosyaları okumak
FileReader.readAsBinaryString(file_blob)
FileReader.readAsText(file_blob, encoding)
FileReader.readAsDataURL(file_blob)
FileReader.readAsArrayBuffer(file_blob)
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = function (event) {
fileDropArea.style.background = 'url(' + event.target.result + ') no-repeat center';
};
reader.readAsDataURL(file) ;
};
File.Slice() ile dosyaları parçalı okumak
Blob : B inary L arge Ob ject
var reader = new FileReader();
var blob;
if (file.webkitSlice) {
blob = file.webkitSlice(startIndex, endIndex);
} else if (file.mozSlice) {
blob = file.mozSlice(startIndex, endIndex);
}
reader.readAsBinaryString(blob);