How to select and display image using FileReader

How to select and display image using FileReader

Apr 25, 2018 | Javascript

You have duplicate ids all over (imgInp and blah), so the selector will select only the first one, eventually your event is bound only to the first input field and the selection of $(‘#blah’) as well. You need to select the relative image with respect to the input. You dont have to duplicate the script as well. Select the next image tag relative to the input like $(input).next(‘img’).attr(‘src’, e.target.result);
function readURL(input) {

if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
$("#blah").fadeIn(400).html('<img src="img/ajax-loader.gif" />');
}
reader.readAsDataURL(input.files[0]);
}
}

$(document).ready(function(){
$("#photoimg").change(function(){
readURL(this);
})

});

Using html to uploade and display image.

<img  id="blah" alt="" src="images/avatar.jpg">
<input type="file" name="photoimg" id="image" value="" />?
Being Idea is a web platform of programming tutorials to make better programming skills and provides Software Development Solutions.

0 Comments

Leave a Reply