More than anything else, the Web is designed to be a
place that is separate from your computer. Pages are designed to display
and work in a almost any platform. Very few elements within HTML cater
to the specific needs of the user's machine. However, some specific
functions offer some sort of access to local machines. One of those
functions is file uploads.
Every now and then, you might want to have a user send
an entire file to the server for processing. Perhaps it is a collection
of transactions, or a document being circulated through a workflow
management system. Regardless of the reason, sending an entire file from
the browser to the server is sometimes useful.
Early versions of HTML made this nearly impossible.
Version 3.2, however, introduced the file selector element, allowing a
user to select a file on their local machine and send it to the server.
To create such an element, use the <INPUT>
tag, setting the TYPE attribute to file. The simplest file selector can
be created with:
Which results
in this form element:
As you can see, a file selector is nothing more than a
single-line text field with a "Browse" button attached to it.
Clicking the Browse button pops up a platform-specific tool that allows
you to select a file on your machine. Once selected, the pathname of the
file is placed in the text element. Alternately, you can simply type a
pathname into the field.
Because it is a text field, you can use the size and maxlength
attributes to control the size and maximum characters accepted by the
element, just like regular text
fields. There is one subtle difference: While the maxlength
attribute will limit the number of characters the user can type in the
field, it does not restrict the pathname inserted into the field by the
"Browse" button. Thus, your server programs should be prepared
to accept very long pathnames from a client machine, even when you've
set maxlength to a
reasonable value.
Limiting file
types
The file selector element can restrict the user to
certain kinds of files. If you only want to receive images, for example,
you can use the ACCEPT
attribute to restrict the selector to image files only.
Since the file selector is platform independent, the
value of the ACCEPT
attribute must be similarly independent. Instead of using a file
extension or naming convention as its value, you instead supply the
MIME encoding of the file types you wish to receive.
Returning to our image example, this element:
<INPUT TYPE="file" ACCEPT="image/*">
creates this
restricted file selector:
How the browser enforces this restriction (if at all)
is not defined. Click on the "Browse" button to see how your
browser handles the situation.
Uploading the
data
File selector elements operate a little differently than
other elements when the form is submitted to the server. In a
conventional form, the file selector will send the pathname of the file
to the server, behaving as if it were a simple text field. If you want
to send the contents of the file, you must add a special encoding
attribute to the <FORM>
tag containing the file selector element.
For things to work correctly, you must set the value of
the encoding
attribute to multipart/form-data.
The form parameters will be transmitted to the server as a multipart MIME-encoded
message, with the file contents encoded as one of the parts of the
message.
File selector elements are not often used, but they can
save the day when you absolutely must upload a file to a server. If
necessary, enlist the aid of a server-side programmer so you can
understand how to utilize this feature.
<< BACK
Index: Website Creation
Resource Guide To - Website Development & Design
Index 2:
Creating Forms - Everything About Forms