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
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 : Binary Large Object
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);