два JS скриптов блокирующих друг друг

Question

У меня есть функция, которая просмотрит изображение, которое собирается быть загружено:

<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> 

Поскольку пользователи имеют возможность загружать более чем одно изображение, я хотел бы второе изображение, которое будет также просмотрен. Это функция, которая должна анонсировать второе изображение:

<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> 

Теперь проблема заключается в том, что, когда оба скрипта активен, они оба предварительный просмотр изображения в контейнере второго изображения (#preview_image2), вместо просмотра первый в первом контейнере, второй - второй. Может ли кто-нибудь сказать мне, почему? Благодаря!

Answer 1

Идея использования функции, чтобы избежать дублирования кода, так что ...

<script> 
function readURL(input) 
{ 
    var reader; 

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

     reader.onload = function (e) 
     { 
      var id = $(input).attr("id"), 
       new_id = id.substr(0, id.length - 1); // remove 's' 
      $("#" + new_id).attr('src', e.target.result); 
      //hide product_images and fileSelector 
     }; 
     reader.readAsDataURL(input.files[0]); 
    } 
} 

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

Обратите внимание, что переменные ALL определены в верхней части функции. Безопаснее определить их там, чтобы вы могли видеть все переменные, которые вы используете, и не смешивать их (не так, как в C/C++, где фигурные скобки определяют область.)

Кроме того, переменная, определенная в родительской функции, доступный как для подфункций. Довольно практично.