In this article I will explain with an example, how to open Fileupload (Upload File) on Button Click using JavaScript and jQuery.
This article will illustrate how to hide HTML Fileupload element and open its File Upload dialog on click of a Button using JavaScript and jQuery.
Open FileUpload (Upload File) on Button Click using JavaScript
The following HTML Markup consists of an HTML Button element, an HTML SPAN and an HTML Fileupload element.
Inside the window onload event handler, the HTML Button element has been assigned a Click event handler and the Fileupload element has been assigned Change event handler.
When the Button is clicked, it triggers the Click event of the Fileupload element which in turn opens the File Upload dialog to choose the File for uploading.
When a File is selected, it triggers the Change event handler of the Fileupload element inside which, the name of the selected File is displayed in HTML SPAN element.
<input type="button" id="btnFileUpload" value="Select File" />
<span id="spnFilePath"></span>
<input type="file" id="FileUpload1" style="display: none" />
<script type="text/javascript">
window.onload = function () {
var fileupload = document.getElementById("FileUpload1");
var filePath = document.getElementById("spnFilePath");
var button = document.getElementById("btnFileUpload");
button.onclick = function () {
fileupload.click();
};
fileupload.onchange = function () {
var fileName = fileupload.value.split('\\')[fileupload.value.split('\\').length - 1];
filePath.innerHTML = "<b>Selected File: </b>" + fileName;
};
};
</script>
Open FileUpload (Upload File) on Button Click using jQuery
The following HTML Markup consists of an HTML Button element, an HTML SPAN and an HTML Fileupload element.
Inside the jQuery document ready event handler, the HTML Button element has been assigned a Click event handler and the Fileupload element has been assigned Change event handler.
When the Button is clicked, it triggers the Click event of the Fileupload element which in turn opens the File Upload dialog to choose the File for uploading.
When a File is selected, it triggers the Change event handler of the Fileupload element inside which, the name of the selected File is displayed in HTML SPAN element.
<input type="button" id="btnFileUpload" value="Select File" />
<span id="spnFilePath"></span>
<input type="file" id="FileUpload1" style="display: none" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var fileupload = $("#FileUpload1");
var filePath = $("#spnFilePath");
var button = $("#btnFileUpload");
button.click(function () {
fileupload.click();
});
fileupload.change(function () {
var fileName = $(this).val().split('\\')[$(this).val().split('\\').length - 1];
filePath.html("<b>Selected File: </b>" + fileName);
});
});
</script>
Screenshot
![Open Fileupload (Upload File) on Button Click using JavaScript and jQuery]()
Demo
Downloads
