How to Preview or show an image before uploaded
do you want to show image on your website How to Preview or show an image before uploaded so you need to implement Javascript in your web page then got preview on your website.
How to Preview or show an image before uploaded
You can Implement this code in asp.net of php web application.
First Step:
You Need to put this code in Under Your Head Tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Second Step
Under body Tag you need to place this code right now.
<form runat="server">
<input type='file' id="fileuploadID" />
<img id="imgTagId" src="#" alt="your image" />
</form>
Third Step
Before closing body tag place this code
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imgTagId').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#fileuploadID").change(function() {
readURL(this);
});
</script>
Final Step
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form runat="server">
<input type='file' id="fileuploadID" />
<img id="imgTagId" src="#" alt="your image" />
</form>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imgTagId').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#fileuploadID").change(function() {
readURL(this);
});
</script>
</body>