How to Create File Upload Fields in HTML5
An HTML web form can receive documents and other files, such as images, from users. When a user submits the form, the browser grabs a copy of the file and sends it with the other form data. To create a file upload field, this is what you do:
Use the <input> element with the type attribute set to file.
The file itself is the form field value.
Use the name attribute to give the control a name.
Here’s an example of markup for a file upload field:
<form action="bin/guestbook.php" method="post"> <p>Please submit your resume in Microsoft Word or plain text format:<br> <input type="file" name="resume"> </p> </form>
Browsers render a file upload field with a Browse button (or a button similarly named) that allows a user to navigate a local hard drive and select a file to send, as shown in this figure.
When you accept users’ files through a form, you may receive files that are either huge or perhaps virus-infected. Consult with whomever is programming your form handler to discuss options to protect the system where files get saved. Several barriers can help minimize your risks, including the following:
Restrictions on file size
Restrictions on file type