javascript - 显示来自 url 的图片并重复此操作 3 张图片

Question

我一直在尝试找到一种方法来重复该脚本，以便我可以在单击并插入网址时显示 3 张照片。下面的代码适用于第一张图片，但我无法弄清楚如何让它显示第二张图片，此时网址填充​​第二个输入但不显示图片..

<div class="form-group">
<label class="col-md-4 control-label">Photo 1</label> 

   <div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon" ><i class=" glyphicon glyphicon-camera pink  "></i></span> 
<form id="form1" runat="server">

    <input type='file' id="imgInp" />
    <img id="blah" id="#" alt="Image Preview" width="247" height="142"/>
</div></div></form></div>


<script type="text/javascript">
  function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp" ).change(function(){
        readURL(this);
    });

</script>





<div class="form-group">
<label class="col-md-4 control-label">Photo 2</label> 

   <div class="col-md-4 inputGroupContainer">
<div class="input-group" >
<span class="input-group-addon"><i class="glyphicon glyphicon-camera pink"></i></span> 
<form id="form1" runat="server" >

    <input type='file' id="imgInp" />

    <img id="blah" id="#" alt="Image Preview" width="247" height="142"/>
</div></div></form></div>

<script type="text/javascript">
  function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp" ).change(function(){
        readURL(this);
    });

</script>

Answer 1

照片1和照片2对于表单“form1”、img“blah”和输入“imgInp”具有相同的id。请解决这个问题。 Id 需要在整个页面中唯一。您可以尝试为所有 HTML 分配不同的 id 吗？

你不应该盲目地重复这样的脚本。尝试重用代码。

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

            reader.onload = function (e) {
                $(imgID).attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#imgInp1" ).change(function(){
        readURL(this, "#blah1");
    });

      $("#imgInp2" ).change(function(){
        readURL(this, "#blah2");
    });

<div class="form-group">
<label class="col-md-4 control-label">Photo 1</label> 

   <div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon" ><i class=" glyphicon glyphicon-camera pink  "></i></span> 
<form id="form1" runat="server">

    <input type='file' id="imgInp1" />
    <img id="blah1" id="#" alt="Image Preview" width="247" height="142"/>
</div></div></form></div>
<div class="form-group">
<label class="col-md-4 control-label">Photo 2</label> 

   <div class="col-md-4 inputGroupContainer">
<div class="input-group" >
<span class="input-group-addon"><i class="glyphicon glyphicon-camera pink"></i></span> 
<form id="form2" runat="server" >

    <input type='file' id="imgInp2" />

    <img id="blah2" id="#" alt="Image Preview" width="247" height="142"/>
</div></div></form></div>