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 ++中那样。）

此外，父函数中定义的变量可用于子函数。非常实用。

两个js脚本互相阻塞

1 个答案: