You need to send this
object only instead of this.value
while calling onchange
<input type='file' id="upload" onchange="readURL(this)" />
because you are using input
variable as this
in your function, like at line
var url = input.value;// reading value property of input element
EDIT - Try using jQuery like below --
remove onchange from input field :
<input type='file' id="upload" >
Bind onchange
event to input field :
$(function(){
$('#upload').change(function(){
var input = this;
var url = $(this).val();
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg"))
{
var reader = new FileReader();
reader.onload = function (e) {
$('#img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
else
{
$('#img').attr('src', '/assets/no_preview.png');
}
});
});