HTML and CSS Reference
Table 9-1. Objects Exposed by the File API
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.
A single file that's used to find information such as file name, size, and MIME type.
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.
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
The length property returns a number of File objects from a FileList .
The item() method accepts a zero-based index and returns a File object at that