In this article I will explain with an instance, how to open Fileupload (Upload File) on Image Click using JavaScript and jQuery.

This commodity will illustrate how to hibernate 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 Epitome element, an HTML SPAN and an HTML Fileupload element.

Within the window onload outcome handler, the HTML Epitome element has been assigned a Click upshot handler and the Fileupload element has been assigned Change event handler.

When the Image is clicked, it triggers the Click consequence of the Fileupload element which in turn opens the File Upload dialog to cull the File for uploading.

When a File is selected, it triggers the Change event handler of the Fileupload element within which, the proper noun of the selected File is displayed in HTML SPAN element.

< img id ="imgFileUpload" alt ="Select File" title ="Select File" src ="orange.png" style =" cursor : arrow" />

< br />

< span id ="spnFilePath"></ bridge >

< input type ="file" id ="FileUpload1" style =" brandish : 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 = part () {

            fileupload.click();

        };

        fileupload.onchange = part () {

var fileName = fileupload.value.carve up('\\')[fileupload.value.dissever('\\').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 chemical element.

Inside the jQuery document ready event handler, the HTML Paradigm element has been assigned a Click event handler and the Fileupload element has been assigned Change event handler.

When the Image is clicked, information technology 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 upshot 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" championship ="Select File" src ="orange.png" style =" cursor : arrow" />

< 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.iii/jquery.min.js"></ script >

< script type ="text/javascript">

    $(function () {

var fileupload = $("#FileUpload1");

var filePath = $("#spnFilePath");

var image = $("#imgFileUpload");

        prototype.click(function () {

            fileupload.click();

        });

        fileupload.alter(function () {

var fileName = $(this).val().split up('\\')[$(this).val().split('\\').length - one];

            filePath.html("<b>Selected File: </b>" + fileName);

        });

    });

</ script >

Screenshot

Open Fileupload (Upload File) on Image Click using JavaScript and jQuery

Browser Compatibility

The in a higher place code has been tested in the following browsers.

Internet Explorer FireFox Chrome Safari Opera

* All browser logos displayed above are property of their respective owners.

Demo

Downloads