1 / 16

HTML5 File Access

HTML5 File Access. Sen Wang 11/17/2011. RFC 1867---- “Form-based File Upload in HTML” NOV 1995 <input type=“file” />. Abstract.

damian
Download Presentation

HTML5 File Access

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 File Access Sen Wang 11/17/2011

  2. RFC 1867---- • “Form-based File Upload in HTML” NOV 1995 • <input type=“file” />

  3. 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'smimetypematches its file extension or restrict the size of an upload.

  4. interfaces • FileList • Blob (Binary Large Object) • File • FileReader

  5. 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 Uploadstate.

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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.

  11. Reference • RFC 1867 • http://www.w3.org/TR/FileAPI/ • http://www.html5rocks.com/en/features/file • http://www.html5rocks.com/en/tutorials/file/dndfiles/ • https://developer.mozilla.org/en/Using_files_from_web_applications • http://www.w3.org/TR/progress-events/#Progress

  12. Thanks a lot • Any questions?

More Related