Multiple File Upload Field

Web page HTML forms allow someone to provide information to the website. Contact forms are an example. The forms may include a file-upload field.

Uploaded files generally are for use on the website. An example is a photo for use with a blog comment. Another example is a video to add to a collection on a web page.

An uploaded file may contain additional information. Although often sent as an email attachment, they can be provided with a form on a web page. An example is a text file containing specifications for something. Another example is a document to review.

To upload a file with an HTML form, the <input type="file" ...> file upload field is used.

Generally, a file upload field can upload one file. With such single-file upload fields, a separate field would be provided for each file to be uploaded.

There is a way to let a file field upload multiple files. In other words, if your form requests 3 images, one file upload field can accommodate all of them — instead of 3 separate file upload fields.

Note: Demonstration form submission buttons have been disabled because the demo's purpose is only so you can see how files are selected for uploading with your browser and operating system.

Here is example code for a single-file upload field followed by a file-selection demonstration form.

<input type="file" name="uploadfield">

To allow more than one file to be uploaded with a type="file" field, the multiple attribute can be inserted. Here is example code for that, followed by a file-selection demonstration form:

<input multiple type="file" name="uploadfield">

As you can see, the only difference between a single-file upload field and a multiple file upload field is the multiple attribute. Using one form file upload field instead of several also makes for a shorter form.

(This content first appeared in Possibilities newsletter.)

Will Bontrager