HTML5 > Forms Elements

File upload control in HTML5

How to create a file upload control with reference to <input> element in HTML5?


File upload control

File upload control is a value to the type attribute which can be written as {type="file"} inside an <input> element. 

It is used to choose the files in the system and upload into the internet.

Creating File upload control.

<form>
<h3>Fileupload control</h3>
<input type="file" name="file1"/>
</form>

In the above code snippet we used value "file" to the type attribute for creating fileupload control.

Onclick of the button "Choose File" in the output redirects the user to the machine (currently using machine) in a separate window.

NOTE: In this case we can add only one file at a time.

OUTPUT

Creating multiple File upload control.

<form>
    <h3>Multiple Fileupload control</h3>
    <input type="file" name="file1" multiple/>
</form>

Multiple file upload control

In the above code snippet, we used multiple attribute inside the <input> element for uploading one or more files at a time.

NOTE: To select the multiple files to upload, hold the ctrl button and select the files with the mouse. 

OUTPUT

 Views: 698 | Post Order: 100



Write for us