HTML5 FILE ACCESSSen Wang

11/17/2011

RFC 1867---- “Form-based File Upload in HTML” NOV

1995

<input type=“file” />

Abstract HTML5 provides a standard way to

interact with local files, via the File API specification. As example of its capabilities, the File API could be used to create a thumbnail preview of images as they're being sent to the server, or allow an app to save a file reference while the user is offline. Additionally, you could use client-side logic to verify an upload's mimetype matches its file extension or restrict the size of an upload.

interfaces FileList Blob (Binary Large Object) File FileReader

FileList Which is a collection of File object. It

represents an array of individually selected files from the underlying system. The user interface for selection can be invoked via <input type="file">, i.e. when the input element is in the File Upload state.

Blob Which represents immutable raw binary

data, and allows for slicing a file into byte ranges.

File inherits from Blob The advantage is to speed up the upload

would be to read and send the file in separate byte range chunks. The server component would then be responsible for reconstructing the file content in the correct order.

File which includes read only informational

attributes about a file such as name, file size, mimetype, a reference to the file and the date of the last modification (on disk) of the file.

FileReader which provides methods to read a File or

a Blob, and an event model to obtain the results of these reads. After you've obtained a File reference, instantiate a FileReader object to read its contents into memory. When the load finishes, the reader's onload event is fired and its result attribute can be used to access the file data.

FileReader.readAsBinaryString(Blob|File) - The result property will contain the file/blob's data as a binary string. Every byte is represented by an integer in the range [0..255].

FileReader.readAsText(Blob|File, opt_encoding) - The result property will contain the file/blob's data as a text string. By default the string is decoded as 'UTF-8'. Use the optional encoding parameter can specify a different format.

FileReader.readAsDataURL(Blob|File) - The result property will contain the file/blob's data encoded as a data URL.

FileReader.readAsArrayBuffer(Blob|File) - The result property will contain the file/blob's data as an ArrayBuffer object.

Once one of these read methods is called on your FileReader object, the onloadstart, onprogress, onload, onabort,onerror, and onloadend can be used to track its progress.

Reference RFC 1867 http://www.w3.org/TR/FileAPI/ http://

www.html5rocks.com/en/features/file http://www.html5rocks.com/en/tutorials/fil

e/dndfiles/

https://developer.mozilla.org/en/Using_files_from_web_applications

http://www.w3.org/TR/progress-events/#Progress

Thanks a lot Any questions?