Skip to content

Instantly share code, notes, and snippets.

@Mauryashubham
Created March 9, 2017 10:29
Show Gist options
  • Save Mauryashubham/138adf9e76382822650e72f6d2b82678 to your computer and use it in GitHub Desktop.
Save Mauryashubham/138adf9e76382822650e72f6d2b82678 to your computer and use it in GitHub Desktop.
Open Choose File option by clicking on Image or Button in HTML
Hi all , Welcome to Maurya Tricks , Today we are going to discuss ,
how to Open Choose File option by clicking on Image or Button in HTML
/**
@author : Shubham Maurya,
Email id : maurya.shubham5@gmail.com
**/
1.Make a file in notepad and save it as index.php and paste the below code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style type="text/css">
.wrapper1
{
display: none;
}
</style>
</head>
<body>
<a id="btnfile" style="color: #464343;">
<i class="fa fa-camera" aria-hidden="true">Click Here to Open</i>&nbsp;<span id="fname"/>
</a>
<div class="wrapper1">
<input type="file" name="user_img" id="uplodfile" accept="image/*"/>
</div>
<!--Click script-->
<script type="text/javascript">
$("#btnfile").click(function () {
$("#uplodfile").click();
});
$("#uplodfile").change(function () {
var file=$(this).val().replace(/C:\\fakepath\\/ig,'');
$("#fname").text(file);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment