HTML DOM Input FileUpload value Property

HTMLWeb DevelopmentFront 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>

Output

This will produce the following output −

Click on “Get File Upload Button Value” button to get the content of value attribute of input file upload button.

raja
Published on 17-Jul-2019 14:06:47
Advertisements