In this article I will explain with an example, how to open Fileupload (Upload File) on Image Click using JavaScript and jQuery.
This article will illustrate how to hide HTML Fileupload element and open its File Upload dialog on click of an Image (IMG element) using JavaScript and jQuery.
Open FileUpload (Upload File) on Image Click using JavaScript
The following HTML Markup consists of an HTML Image element, an HTML SPAN and an HTML Fileupload element.
Inside the window onload event handler, the HTML Image element has been assigned a Click event handler and the Fileupload element has been assigned Change event handler.
When the Image 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.
<img id="imgFileUpload" alt="Select File" title="Select File" src="orange.png" style="cursor: pointer" />
<br />
<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 image = document.getElementById("imgFileUpload");
image.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 Image Click using jQuery
The following HTML Markup consists of an HTML Image element, an HTML SPAN and an HTML Fileupload element.
Inside the jQuery document ready event handler, the HTML Image element has been assigned a Click event handler and the Fileupload element has been assigned Change event handler.
When the Image 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.
<img id="imgFileUpload" alt="Select File" title="Select File" src="orange.png" style="cursor: pointer" />
<br />
<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 image = $("#imgFileUpload");
image.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 Image Click using JavaScript and jQuery]()
Demo
Downloads
