Въведение - FileReader HTML 5

Въведение

HTML 5, най-накрая, предостави стандартен начин за работа с локални файлове, чрез File Api.
Като за пример:
можете вече да имате thumbnail  preview на снимките, преди да се пратят към сървъра.

Четене на файлове

FileReader включва четири основни метода за четена на файл асинхронно.

FileReader.readAsBinaryString(Blob|File) резултата от тази функция е Blob

и binary string.Всеки byte е представен, като integer в range [0..255]

FileReader.readAsBinaryString(Blob|File) резултата от тази функция е Blob дата,

представена в текстов формат.

FileReader.readAsDataURL(Blob|File) резултата от тази функция е Blob дата encoded 

като data url

FileReader.readAsArrayBuffer(Blob|File) резултата от тази функция е Blob дата, 

като ArrayBuffer

един от тези методи се извиква за FileReader като event :

onloadstart, onprogress, onload, onabort, onerror,onloadend 

Следващия пример ползва reader.readAsDataURL() 

като генерира thumbnail  от избрания файл на потребителя.

html

 <form id="upload">
       <img id="uploadPreview"  width="75"/>
      <input type="file" name="file" />
     <button type="upload_image" id="upload_image" name="upload_image">Upload</button>
  </form>

javascript

var oFReader = new FileReader()

var oFile = document.getElementById("upload_image").files[0];

oFReader.onload = function (

                document.getElementById("uploadPreview").src = oFREvent.target.result;          

 };

            

oFReader.readAsDataURL(oFile);   

REFERENCES

• File API specification
• FileReader interface specification
• Blob interface specification
• FileError interface specification
• ProgressEvent specification

Поздрави Мехмедов!