HTML DOM Input FileUpload value Property

HTML Web Development Front End Technology

The HTML DOM input FileUpload value property returns the content of the value attribute of file upload input button.

Syntax

Following is the syntax −

object.value

Example

Let us see an example of input FileUpload value property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM name Property</title>
<style>
   body{
      background-color:#397367;
      color:#fff;
      padding:20px;
   }
   .btn{
      display:block;
      background-color:#22223B;
      color:#fff;
      border:none;
      padding:0.5rem;
      border-radius:50px;
      width:80%;
      margin:10px;
   }
   .show-value{
      font-weight:bold;
      font-size:1.4rem;
      color:#fff;
   }
</style>
</head>
<body>
<h1>FileUpload value Property Example</h1>
<p>Please Select a File!</p>
<input type="file">
<button onclick="getValue()" class="btn">Get File Upload Button Value</button>
<div class="show-value"></div>
<script>
   function getValue() {
      var chooseFileBtn= document.querySelector("input");
      document.querySelector(".show-value").innerHTML ="Value = " + chooseFileBtn.value;
   }
</script>
</body>
</html>