HTML Upload Fields

You have probably used file upload fields in the past to upload photos or other files to the web, and now you get to learn how to create your own file upload fields. The <input> tag is used, with the type set to "file" in order to create this field.

One important thing to remember about using the upload field is that the form method must be set to "post" and not "get" since a file must be sent behind-the-scenes (it cannot be sent in the URL).

Also, when using this field, the encryption type must be specified in the opening form tag: enctype="multipart/form-data".

<form action="what-to-do-next.php" method="post" enctype="multipart/form-data">
  <input type="file" name="my-file" size="50" maxlength="25" /> <br />
  <input type="submit" name="upload" value="Upload!" />
</form>

The result, including the "Upload!" button, is:


You should already be familiar with the "name" attribute, which is used to identify the contents of the field when the form is submitted. The "size" attribute should also be familiar, as it controls the visible size/length of the field on the webpage. "maxlength" controls (limits) the length of the filename that can be uploaded. The name attribute is important, but the other two are optional.

If you want to limit the size of the file that can be uploaded, a hidden form field can be added to the form with a value that is the file size limit that you prefer (measured in kilobytes).

<input type="hidden" name="MAX_FILE_SIZE" value="500" />

Where the file goes once it is uploaded, and how you can retrieve the file to use it, is another story entirely. You can learn more about these details from our PHP tutorial