Opening file dialog box on clicking a link or Button in asp.net

Description:-

  in this example we explain that how to open or display File DialogBox Directally when click on link button or link or Button for uploading file. this is the same functionality that we are using in GMAIL when we send the mail and attach the file.when we click on attach file link it directally open File DialogBox for choose the File to upload.

For this we Create a Event OnChange in FileUpload Control are as follow

<asp:FileUpload ID="FileUpload1"  runat="server" onchange="change(this)" style="display:none" />

we can Call a JavaScript Function when Change is occur in FileUpload and in Javascript Function we Fetch the Id if the Image Control and assign File Path to this Image Control when user Choose From the FileDialogBox.

What is OnChage Event:-

            It is an JavaScript Event that is Fire when any Change occur in target value or Control.

Syntax:-

// Javascript
element.onchange = jsFunction;
// HTML
<element onchange="jsFunction();"></element>  

Example:-

                        <asp:FileUpload ID="FileUpload1"  runat="server" onchange="change(this)" style="display:none" />

To Show Example of How to Upload File in MVC Application then click here upload Image and bind to Gridview in MVC

To show Example of How to Upload Multiple File in MVC Application then click here upload multiple File in MVC

How to upload File and Fetch file from SqlServer and bind to Gridview fetch file from Sqlserver and bind to Gridview


Code For FileDialogBox:-

<script type="text/javascript">

    function change(valueTemp) {

        var a = document.getElementById("<%= Image1.ClientID %>");

        a.src = valueTemp.value;

        function show() {

            document.getElementById("<%= FileUpload1.ClientID %>").click();

    }

  </script>

<asp:Image ID="Image1" runat="server" style="position:absolute; left:340px; top:20px" Width="150" Height="150" />

        <br />

        <a href="javascript:show()"  style="position:absolute; left:370px; top:180px">change photo</a>

        <br />

        <asp:FileUpload ID="FileUpload1"  runat="server" onchange="change(this)" style="display:none"