How to Use HTML5 Input Type 'file' - With Examples

If you’re developing a nice website like Facebook or Youtube where subscribers share images and videos, or you’re selling premium content like e-books online, you have to provide a way for users to upload content. In this tutorial, I will show you how to add file uploading capability to your web page like a pro.

The W3C HTML Standard defines several types each designed to handle a specific type of data. For file uploading purposes, the HTML input element, aptly a tag named , has been provided. How does it work? Let’s dive straight into the tutorial to find out.

The HTML5 File Input Element

The file element is created using the input type=file as shown below. The first example creates a single file upload box whereas the second example creates a multi-file upload field.

p> label for="profile_pic">Profile Pic: label> input multiple id="profile_pic" name="profile_pic" type="file">  p>  p> label for="pictures_upload">Pictures: label> input multiple id="pictures_upload" name="pictures[]" type="file">  p> 

Creating a working file upload form involves more than just adding the input element. Read the details below

The Client Side Code

Fire up your favorite text editing program, in my case I will use notepad. Add this code:

 html lang="en">  head>  Title>File Upload TutorialTitle>  head>  body>   body>  html> 

The line containing is a comment to make our code easier to read and will not be displayed to the user.

Next, add a form element between the