HTML and CSS Reference
In-Depth Information
Table 9-1.
Objects Exposed by the File API
Object
Description
FileList
A list of files selected by the user. A user typically selects files using a file field or by dragging
from Windows Explorer and dropping them on a predefined area of a web page.
File
A single file that's used to find information such as file name, size, and MIME type.
FileReader
Allows you to read a file in asynchronous fashion. Once read, you can either upload the
contents to the server or use them for custom processing.
The object model of the File API is quite small, but you can use these three objects in creative ways
that were impossible (or at least very difficult) prior to HTML5. Some of the creative ways in which you can
use the File API are as follows:
• In traditional HTML, when you use a ile ield to upload iles, there is no checking of
file size on the client end. Only when the file reaches the server can you perform
checks in the server-side code and accept or reject the file. You can now reject files
above a certain file size at the client.
• You can read image iles on the client side and render a preview or thumbnail before
they're uploaded to the server. Such a facility can also be used in social networking
applications or photo album applications that deal with images.
• You can validate the content of ile before it's uploaded to the server. For example, if
your application is supposed to upload XML files, you can validate an XML
document before it reaches the server.
• You can develop client-side images or ile catalogs that a user can review before
finally uploading them to the server.
• You can develop a photo album application that lets the user drag and drop images
files rather than individually picking them up.
n
Note
In the future, HTML5 may add more support for file-system navigation. A draft specification is available at
http://dev.w3.org/2009/dap/ile-system/pub/FileSystem/
. Ho
wever, as of this writing there is little or
no support for these features in the leading browsers.
FileList Object
The
FileList
object represents a list of
File
objects. A
FileList
is returned either from a file field (
<input
type="ile">
) placed on a web page or by the user dragging and dropping local files from Windows Explorer
on a droppable area of a web page. Normally, you iterate through a
FileList
to access individual
File
objects. The
FileList
object exposes just one property and one method, as described in Table 9-2.
Table 9-2.
Properties and Methods of the
FileList
Object
Property / Method
Description
length
The
length
property returns a number of
File
objects from a
FileList
.
item()
The
item()
method accepts a zero-based index and returns a
File
object at that
index.
