HTML and CSS Reference
In-Depth Information
Table 9-5.
Properties of the
FileReader
Object
Property
Description
error
Error that occurred (if any) while reading a file.
readyState
State of a
FileReader
object. The possible
readyState
values are
0
(
EMPTY
),
1
(
LOADING
), and
2
(
DONE
).
result
File's contents. This property is valid only after the read operation is complete.
The format of the data returned depends on the read method invoked.
The
FileReader
raises certain events as the file is being read. You can wire up handlers for these events
and intercept various stages of the read operation. The events raised by the
FileReader
object are given in
Table 9-6.
Table 9-6.
Events of the
FileReader
Object
Event
Description
load
Raised when a file is successfully read
loadstart
Raised when the reading of file content is about to begin
loadend
Raised when the file-reading operation completes successfully or with an
error
loadprogress
Raised periodically when data is being read
error
Raised when there is some error while performing the read operation
abort
Raised when a read operation is aborted
Out of all the events listed in Table 9-6, you must handle the
load
event because that is where you can
access the file content.
Selecting Files to Be Used With the File API
As mentioned previously, files to be accessed using the File API must be explicitly selected by the user in
one of the following ways:
• A user can select iles using the Open File dialog shown by a ile ield control.
• As user can drag iles from Windows Explorer and drop those iles on some
predefined area of a web page.
The first way is straightforward and traditional. A variation on this technique is to display the Open
File dialog without a visible file field on the page. In such cases, you need to play tricks to achieve the
desired behavior. The second way is specific to HTML5, and with the native support for drag-and-drop it's
easy to implement in web pages.
The following sections discuss these two ways of selecting files. Note that HTML5 drag-and-drop
features aren't restricted to file selection alone and can be used independently in your applications.
Using a File Field to Select Files
Using a file field to select one or more files is the most basic technique of selecting files to be used with the
File API. Prior to HTML5, a file field control allowed the selection of only one file at a time. If you wanted to
