Introduction:
Here I will explain how to open file upload dialog on button click or image in jQuery or show upload button to upload images instead of file upload control in jQuery with example. To show file upload dialog box on button click in jQuery we need to hide file upload control and enable upload control click on button click.
Description:
In previous articles I explained jQuery load more records on button click in repeater, jQuery show asp.net exception message in ajax calls, jQuery check whether radiobutton selected or not, jQuery get radio button selected value by name, jQuery validate radiobuttonlist with example and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery to open file upload dialog box on button click or image with example.
In previous articles I explained jQuery load more records on button click in repeater, jQuery show asp.net exception message in ajax calls, jQuery check whether radiobutton selected or not, jQuery get radio button selected value by name, jQuery validate radiobuttonlist with example and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery to open file upload dialog box on button click or image with example.
To open file upload dialog box on
button click in jQuery we need to write the
code like as shown below
<input style="display:none" type="file"
id="fileupload1"
/>
<input type="button"
class="button"
id="btnUpload"
onclick='$("#fileupload1").click()'
value="Upload"/>
|
If
you want to check it in complete example you need to write the code like as
shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show upload
button instead of file upload</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$("#fileupload1").change(function () {
$("#spnName").html($("#fileupload1").val().substring($("#fileupload1").val().lastIndexOf('\\') + 1));
});
});
</script>
<style type="text/css">
.button {
background: #333;
color: #fff;
padding: 10px 15px;
border-radius: 5px;
}
.button:hover {
background: #51A8CA;
}
</style>
</head>
<body>
<form id="form1>
<div><br />
<input style="display:none" type="file"
id="fileupload1"
/>
<input type="button"
class="button"
id="btnUpload"
onclick='$("#fileupload1").click()'
value="Upload"/>
<span id="spnName"></span>
</div>
</form>
</body>
</html>
|
Live
Demo
For live demo click on below button to upload file
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
4 comments :
cool...
God Idea
Nice Suresh...Thanku......
after selecting on the button we click open ,after clicking on that it should be displayed like normal images in particular div or anything ,so tell me about that
Note: Only a member of this blog may post a comment.