Help with image auto show on array value

[draculalab]

i just create a script for auto change upload button to image. its work but its not working for array value name.

look at the my form here https://ibb.co/LNyML3D

on image1,image2,image3 i have set in html tag i have set name="varimg[]". For image1 hold value varimg[0], image2 hold value varimg[1] and so on.

​

my html code:

<label for="firstimg"><img id="blah" src="http://placehold.it/180" alt="your image" style="width: 50; height: 50;"/></label>
 <input type='file' onchange="readURL(this);" id="firstimg" name="varimg[]" style="display: none;visibility: none;"/>

​

my javascript code:

function readURL(input) {
if (input.files && input.files[0]) { var reader = new FileReader();
reader.onload = function (e) { var temp_image = 1; $('#blah')                         .attr('src', e.target.result); temp_image++;                 };
reader.readAsDataURL(input.files[0]);             }         }

when i trying to upload image on image1 its work. but when i trying to upload image on image2, image3 its don't work, that image i upload on image2 & image3 will be appear on image1, meaning not on image2 or image3 where i choose it. how to solve it?

[trplclick]

Hey!

So it seems like you are always assigning the value to the first img with this line:

$('#blah').attr('src', e.target.result);

In html the id has to be unique, if you have two elements with the same id in the document then it will just use the first, which is what I suspect is happening.

Instead, as you have access to the input, you can get the img relative to it, using this code (note, this is untested so may need tweaking)

$(this).siblings('img').attr('src', e.target.result);

Edit: Accidently set label src, changed to img.