URLから画像を表示して3枚の画像を繰り返す

Question

URLをクリックして挿入すると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の両方が同じ持っている...以下のコードは、最初の写真のために動作しますが、私はそれはURLが第二の入力が、表示されていない画像を移入した瞬間に第二画像を,,表示にする方法をうまくカントform "form1"のid、img "blah"、 "imgInp"を入力します。これを修正してください。 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>