If you want to preview and image before its uploaded you have two options
1. Using a jQuery plugin
There are plenty of jQuery plugins available that you can use to achieve this purpose. Here I will list some of the common plugins used.
2.Without using a jQuery plugin
Here you can use simple jQuery as shown below.
HTML
<form id="form1" runat="server">
<input type='file' id="imgUp" />
<img id="preview" src="#" alt="your image" />
</form>
JavaScript
<script type="text/javascript">
$("#imgUp").change(function(){
var input= $(this).val();
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
});
</script>
Cheers
Samitha
1. Using a jQuery plugin
There are plenty of jQuery plugins available that you can use to achieve this purpose. Here I will list some of the common plugins used.
2.Without using a jQuery plugin
Here you can use simple jQuery as shown below.
HTML
<form id="form1" runat="server">
<input type='file' id="imgUp" />
<img id="preview" src="#" alt="your image" />
</form>
JavaScript
<script type="text/javascript">
$("#imgUp").change(function(){
var input= $(this).val();
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
});
</script>
Cheers
Samitha
No comments:
Post a Comment