How to set a value to a file input in HTML?

HTML Web Development Front End Technology

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>