Reading multiple image using fileReader

Question

I'm trying to make the image as a input file button. Once image selected then the default image change to the image selected. By using the fileReader I am only able to target one image.

How could I make it only target the image attr in that selected div?
Is that possible ?

HTML Code

<div class="prep">
<div class="row">
    <label>Step 1</label>
    <img src="http://png-4.findicons.com/files/icons/129/soft_scraps/256/button_upload_01.png" id="upfile1" style="cursor:pointer" class="img"/ >
    <input type="file" class="inputimg" />
</div>
</div>
    <span class="add">Add Step</span>

JS Code.

$(document).on("click" ,".img" , function(){

$(this).closest("div").find(".inputimg").trigger("click");
});

var count = 1;
$(".add").on("click",function(){
    count ++;
var row = '<div class="row"><label>Step '+count+'</label><img src="http://png-4.findicons.com/files/icons/129/soft_scraps/256/button_upload_01.png" id="upfile1" style="cursor:pointer" class="img"/ ><input type="file" class="inputimg" />';
$(".prep").append(row);
});
    $(".inputimg").change(function(){
        readURL(this);
    });

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

            reader.onload = function (e) {
                $('.img').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

refer to my jsfiddle Demo

Why the dynamically added image , the alignment is not same with the first one ?

Thank You

Adding a space after the label tag and before the img tag resolves the issue. I've updated your fiddle. — rageit
– rageit, Commented Jun 26, 2014 at 12:19

Shiva · Accepted Answer · 2014-06-27 05:31:07Z

1

Yes it is obviously possible you just have to traverse the DOM in the proper hierarchy.

You need to make two changes.

Bind the change event to the newly dynamically created element too. You can simply achive it by adding the following code after the $(".prep").append(row); statement
```
    $(".inputimg").change(function () {
             readURL(this);
    });
```
In realURL() function you will have to be more specific as selecting like this $('.img') will select all the image tags and not just the one near to the clicked object. So that part can be changed to $(input).siblings('.img').attr('src', e.target.result);

Have a look at the Updated JSFiddle

Update 1:

For your last question i.e. about the misalignment of the images, as mentioned by @rageit in the comment you need to add an extra space in between the <label> and <img> tag in your dynamically created elements, the updated fiddle reflects that.

edited Jun 27, 2014 at 5:31

answered Jun 26, 2014 at 12:40

Shiva

6,9034 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user3732837 Over a year ago

Thank You ! I have try using $(this).closest(".img") to target the image but it doesn't work. why parent > children only it will target ? :)

Shiva Over a year ago

@user3732837: .closest actually traverses up the DOM tree and tries to find the element. So it will happen something like, the element will check the criteria for itself, then move to the parent and find for .img and so on till it reaches the top of the DOM tree. But you need to find .img element that is on the same level. So you can also use the the .siblings() function.

bc110402307 Syed Zeeshan Haide Over a year ago

@Shiva R you there?

Shiva Over a year ago

@bc110402307SyedZeeshanHaide: yes I am.

bc110402307 Syed Zeeshan Haide Over a year ago

@Shiva i wanna ask that how we can restrict the number of steps in your fiddle? Means what if i want to restrict user to maximum step 5. On further clicking user will find a dialog saying you can only create 5 steps. Hope you understand what i mean to say. .. I will upvote for you

|

Collectives™ on Stack Overflow

Reading multiple image using fileReader

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related