How to call java scrip on button click

Hello vikas you can call it by jquery to
$("#ChangePic").click(function(){

var control = document.getElementById("FileUpload1");

if (control.style.visibility == "visible" || control.style.visibility == "")
control.style.visibility = "hidden";
else
control.style.visibility = "visible";
return;
});

no no need to write this below code

OnClientClick="toggleVisibility()"

[How to Call javascript function on button click event]

Launch the page on your browser, right click and view the page source , can you find the FileUpload1 control?
1. Since you specified Visible="false" for the FileUpload control, it will never be rendered on your HTML page at all, so you will never be able to access it through you client-side script. If you want to hide it upon page load and be able to toggle it via script, do not use the Visible="false" property, instead you have to do it on the client side by either setting the CSS property of display to none, or use JavaScript to hide it. e.g.

var control = document.getElementById("FileUpload1");
control.style.visibility = "hidden"; // to hide
// or
control.style.display = "none"; // to hide
// to show
control.style.display = "";

2. Having set it right after 1, launch it and view its page source again, can you find the id="FileUpload1", may be not, instead you may see something that looks like

id="MainContent_FileUpload1"

. Yes, the name may be prefixed with some other string to make it unique, to get the actual id, you have to use:

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

3. Lastly, all your controls will be inside a form, and the default behavior of any form submit is to sent the data to the server. You JavaScript code will toggle the control on each button click, but it will always be refreshed to the default hidden state as a result of the form submission. The solution is to cancel this default bahavior. Solution? Set it to return false in your JavaScript function, and add a return to the onClientClick attribute.
To wrap it up, the finished code will look like this:

<div>
    <asp:Button ID="ChangePic" runat="server" Text="Change Pic" onClientClick="return toggleVisibility()" />
    <asp:FileUpload ID="FileUpload1" runat="server" />
</div>

<script>
    var control = document.getElementById("<%= FileUpload1.ClientID %>");
    control.style.visibility = "hidden";
    function toggleVisibility()
    {
        if (control.style.visibility == "visible")
            control.style.visibility = "hidden";
        else
            control.style.visibility = "visible";
        return false;
    }
</script>

try jquery instead

$("#ChangePic").click(function(){
toggleVisibility();
});