HTML DOM Input FileUpload Object


The HTML DOM input FileUpload Object represents the <input< element with type=”file” of an HTML document.

Let’s see how to create input FileUpload object −

Syntax

Following is the syntax −

var fileUploadBtn = document.createElement(“INPUT”);
fileUploadBtn.setAttribute(“type”,”file”);

Properties

Following are the properties of HTML DOM input fileupload Object −

Property
Explanation
accept
It returns and modify the value of the accept attribute of an input file upload button.
autofocus
It returns and modify whether an input file upload button should automatically get focused or not on page load.
disabled
It returns and modify the default value of an input file upload button.
defaultValue
It returns and modify the value of the accept attribute of an input file upload button.
files
It returns a filelist object which refers to all the files which are selected by an input file upload button.
forms
It returns the reference of the form which enclose the file upload input button.
multiple
It returns and modify whether the user can select multiple files or not.
name
It returns and modify the value of the name attribute of an input file upload button.
required
It returns and modify the value of the required attribute of an input file upload button.
type
It returns and modify the value of the type attribute of an input file upload button.
value
It returns and modify the content of the value attribute of an input file upload button.

Example

Let us see an example of HTML DOM input file upload object −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
   }
   .btn{
      background-color:lightblue;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:1rem auto;
      display:block;
   }
</style>
</head>
<body>
<h1>DOM Fileupload Object Example</h1>
<button onclick="createFileBtn()" class="btn">Click me to create an input file upload button</button>
<script>
   function createFileBtn() {
      var fileUploadBtn = document.createElement("INPUT");
      fileUploadBtn.setAttribute("type", "file");
      document.body.appendChild(fileUploadBtn);
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “blue” button to create a file upload button.

karthikeya Boyini
karthikeya Boyini

I love programming (: That's all I know

Updated on: 30-Jul-2019

213 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements