Uploading Files Using CGI and Perl (1) Demo

Step 1: Creating the File Upload Form

1. The FORM Tag

The first line of code for a file upload form is the FORM tag, as follows:

<FORM ACTION="/cgi-bin/upload.cgi" METHOD="post" ENCTYPE="multipart/form-data">

Note the special multipart/form-data encoding type, which is what we use for file upload. Note also that the form will post the data to our upload script, called upload.cgi, which we'll create in the next section.

2. The INPUT TYPE=FILE Tag

The second part of the file upload form is the upload field itself. In this example we're creating a form so that our users can upload their photos, so we need an upload field called "photo":

Photo to Upload: <INPUT TYPE="file" NAME="photo">

3. Other INPUT Tags

You can include other, normal form fields in your form as well as the INPUT TYPE=FILE field. Here we're going to allow the user to submit their email address along with their photo:

Your Email Address: <INPUT TYPE="text" NAME="email_address">

4. The Submit Button

As with a regular form, we need a "Submit" button so that the user can send the form to the Web server:

<INPUT TYPE="submit" NAME="Submit" VALUE="Submit Form">

The Finished Form

So our complete file upload form looks like this:

Save this file somewhere on your hard drive, and call it something like "file_upload.html".

So far so good! Now let's look at how to write the server CGI script, upload.cgi.