2 JS脚本阻断彼此

我有预览图像是要被上传的一个函数：2 JS脚本阻断彼此

<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），而不是预览第一个容器中的第一个，第二个容器中的第二个。有人可以告诉我为什么吗？谢谢！

来源

2015-01-20 Frank

这两个脚本是否在相同的作用域中具有相同的名称？ – Compass 2015-01-20 21:13:04

您似乎在同一页面上有两个相同名称的函数。到'change（）'处理程序运行时，第二个定义将取代第一个定义。它是页面上唯一的'readURL（）'，所以它在两种情况下都运行。 – 2015-01-20 21:13:30

这是正确的，为什么两个函数都有相同的名称？如果你需要使用不同的阅读器，那么只需添加一个函数参数。 – MaxZoom 2015-01-20 21:15:19

使用功能的想法是，以避免重复代码，所以......

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

注意变量在函数顶部的所有定义。在那里定义它们是比较安全的，所以你可以看到你正在使用的所有变量，并避免混合它们（不像C/C++中的大括号定义范围）。

此外，父函数中定义的变量是按原样提供给子功能。非常实用。

来源

2015-01-20 22:04:04

2 JS脚本阻断彼此

回答

相关问题