Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Open File Upload Dialog Box on Button (image) Click Instead of File Upload Control

Sep 3, 2015
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.

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 RSS subscribe by email Subscribe by Email

4 comments :

Mahaveer Prajapati said...

cool...

Anonymous said...

God Idea

Anonymous said...

Nice Suresh...Thanku......

Unknown said...

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

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.