File Upload Tutorial - part 1
<- Prev | Next
HTML Source Code for File Uploads
As far as the HTML code is concerned, there are 3 things
you need to do to enable file uploads.
- Make sure the form's METHOD is set to POST
The GET method is limited to a certain number of characters.
If you submit large amounts of data, they will be truncated
if they exceed the maximum bytes allowed for the GET
Method. Furthermore, the next item in this list requires
the POST method in order to work.
- Add the parameter enctype='multipart/form-data'
to the FORM tag
This forces the browser to encode the form in a special
manner - pretty much identical to the format used by
MIME (email). The browser sends the data in sections,
where each section has a header that describes the data
that the section contains. Each section is delimited
by some large random string. You don't need to know
anything about this to get this to work, unless you
build your own CGI parser. The RudeCGI
CGI C++ library library supports this encoding.
- Provide one or more file input fields within the form.
A File input field acts like any other input field:
it has a type, a name, and a value.
The value is determined when the person filling
in the form browses to a particular file. You are probably
already familiar with this. The HTML code for a File
Input Field looks like this:
<INPUT TYPE="FILE" NAME="SOMENAME">
You can use anything in place of "SOMENAME". If
you provide more than one file input field, they can
each have the same name, or they can each have different
names. However, accessing multiple uploaded files
can be a bit tricky on the CGI end if they all have
the same name. When possible, use different names
for each file input field.
Here is the HTML source code for a simple file upload form.
It is as simple as it gets. Make sure the ACTION parameter
points to your CGI script.
<input type="file" name="userfile"/>
Here is the HTML source for a more complex form that accepts
three files for upload, plus some other information:
ENTER YOUR NAME: <input type="text"
ENTER YOUR EMAIL ADDRESS: <input
SELECT FILE NUMBER 1: <input type="file"
SELECT FILE NUMBER 2: <input type="file"
SELECT FILE NUMBER 3: <input type="file"
<- Prev | Next