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腳本阻斷彼此

回答

相關問題