two js scripts blocking each other

Vote count:

0

I have a function that previews an image that is about to be uploaded:

    <script>
function readURL(input) {

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

    reader.onload = function (e) {
         var if_alternative = true;
        $('#preview_image').attr('src', e.target.result);
        //hide product_images and fileSelector
    }
    reader.readAsDataURL(input.files[0]);
  } 
}

$("#product_images").change(function(){
readURL(this);
});
</script>

Since users are able to upload more than one image, I would the second image to be previewed as well. This is the function that is supposed to preview the second image:

<script>
function readURL(input) {

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

    reader2.onload = function (e) {
         var if_alternative2 = true;
        $('#preview_image2').attr('src', e.target.result);
    }
    reader2.readAsDataURL(input.files[0]);
 } 
}

$("#product_images2").change(function(){
readURL(this);
});
</script>

Now, the problem is that, when both scripts are active, they both preview the image in the second image container (#preview_image2), instead of previewing the first one in the first container, and the second one in the second. Can anybody tell me why? Thanks!

asked 49 secs ago

sehetmich

94

two js scripts blocking each other