HTML5 File Access

advertisement
Sen Wang
11/17/2011

RFC 1867---“Form-based File Upload in HTML” NOV 1995

<input type=“file” />


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.




FileList
Blob (Binary Large Object)
File
FileReader

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.



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.

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.

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 'UTF8'. 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,on
error, and onloadend can be used to track its
progress.






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/progressevents/#Progress

Any questions?
Download