Set Value to File Input in HTML



To set a value to a file input in HTML, use the type attribute. It defines a Browse button to upload the files with a file-select field ?

<input type = "file"> 

However, we cannot set a specific value to a file input in HTML for security reasons. Nothing will happen, even if, let's say we set a value like this ?

<input type="file" value="E:/new/resume.docx"> 

Let us see some examples to upload single and multiple files with input type file.

File select with only one file

Example

This allows a user to upload only a single file ?

<!DOCTYPE html> <html> <body> <h1>Resume</h1> <p>Upload your resume:</p> <form action="/details.php"> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"><br><br> <input type="submit"> </form> </body> </html>

Output

Click the Choose File button to upload the file ?

We will upload the Resume.docx file above.

File select with multiple files

Example

This allows a user to upload multiple files. Set multiple in the input type and the button will display Choose Files for multiple files ?

<!DOCTYPE html> <html> <body> <h1>Resume</h1> <p>Upload your resume:</p> <form action="/details.php"> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile" multiple><br><br> <input type="submit"> </form> </body> </html>

Output

We clicked on Submit and selected 3 files as shown below ?

Click Open and now the count 3 is near the Choose Files button i.e. we uploaded 3 files successfully ?

Updated on: 2022-11-01T11:23:19+05:30

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements