In this tutorial we will see how to Open Select File Dialog Box Using JavaScript. The HTML DOM click() Method is used for this which will open select file box when normal HTML button is clicked.
Table of Contents
HTML Code
HTML Code is given below, This code contains an input element and a button element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Open Select File Dialog Box Using JavaScript</title>
</head>
<body>
<input type="file" id='file'>
<button onclick="myFile()">Select File</button>
</body>
</html>
.click() Method
The HTML DOM click() Method is used to simulate the mouse click for the selected HTML element.
The click method will execute a click for an element as if the user has actually clicked on that element.
It is supported by all major browsers.
getElementById() Method
The getElementById() Method is used to get or select or target the HTML element with a specified value of Id attribute.
In this example the id of input element is 'file'. This id is used to target the input element.
It is also supported by all major browsers.
JavaScript Code
In this example onclick event will trigger the main function when button is clicked. The main function will then select the input element using getElementById method and it will open the select file dialog box using the .click() method.
Take a look at the code given below.
<script>
function myFile()
{
document.getElementById('file').click();
}
</script>
Demo
Video Tutorial
Watch video tutorial on how to Open Select File Dialog Box Using JavaScript.