Thanks to visit codestin.com
Credit goes to www.tutorialspoint.com

HTML DOM Input FileUpload value Property



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.

Updated on: 2019-07-30T22:30:26+05:30

152 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements