Selecting and displaying images using FileReader

Question

Here is my problem, I have this little code to display img that I load LIVE without rebooting, but it only works with one img, because readURL(input) does not have a class and works directly from noname-input, and when I add class readURL(input.joint) , it throws an error! Here is my code:

  <input class="joint" type='file' id="imgInp" /> <img style="width:45px" id="blah" src="#" alt="your image" /> <script type="text/javascript"> function readURL(input) { if (input.filers && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function(){ readURL(this); }); </script> 

I need to add some id or class to this jquery function to make it unique for each input.

What am I trying to do:

 <input class="joint" type='file' id="imgInp" /> <img style="width:45px" id="blah" src="#" alt="your image" /> <script type="text/javascript"> function readURL(input.joint) { if (input.joint.filers && input.joint.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.joint.files[0]); } } $("#imgInp").change(function(){ readURL(this); }); </script> <input class="file2" type='file' id="imgInp" /> <img style="width:45px" id="blah" src="#" alt="your image" /> <script type="text/javascript"> function readURL(input.file2) { if (input.file2.filers && input.file2.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.file2.files[0]); } } $("#imgInp").change(function(){ readURL(this); }); </script> 

Answer 1

You have duplicate identifiers ( imgInp and blah ), so the selector will select only the first one, ultimately your event is bound only to the first input field and select $('#blah') . You need to select a relative image relative to the input. You also do not need to duplicate the script. Select the following image tag for the input, for example $(input).next('img').attr('src', e.target.result);

So try:

 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $(input).next('img').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $(function(){ $(".upld").change(function () { //set up a common class readURL(this); }); }); 

Fiddle

Answer 2

Well, the fact that you are trying to add a class to a function argument with dotted notation shows that you need to know more about how Javascript works than can be explained in a simple StackOverflow answer, but let me try:

• input in readURL(input) is an argument name similar to a variable name, so you cannot extend it. This is a link to what you pass when you call readURL , in this case, if you look at the end of your code, this is a link to this . this refers to the elements referenced by the jQuery selector you passed in: "#imgInp" .

So, if you want to use the .joint class instead, just pass this as a jQuery selector:

 $(".joint").change(function(){ readURL(this); }); 

• However, if you have multiple .joint elements, your readURL function readURL stop working correctly, because currently it is only intended to change src in #blah . What you need to do is change the src each element matching img .

So, if you have this kind of HTML:

 <input class="joint" type='file' /> <img class="joint-img" style="width:45px" src="#" alt="your image" /> <input class="joint" type='file' /> <img class="joint-img" style="width:45px" src="#" alt="your image" /> <input class="joint" type='file' /> <img class="joint-img" style="width:45px" src="#" alt="your image" /> 

You can place your readURL function after all the elements and change the reader.onload section as follows:

 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $(input).next('.joint-img').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $(".joint").change(function(){ readURL(this); }); 

Answer 3

Your code works correctly for me when I correct a typo:

 if (input.filers && input.files[0]) { ^^^^^^ if (input.files && input.files[0]) { 

Here is an example: http://jsfiddle.net/s6ttw/

Update

If you want it to work the way you expect, you need to use classes, not identifiers.

Here is the best example of what you are asking for: http://jsfiddle.net/s6ttw/1/