次のコードは1つのモデルでは動作しますが、別のモデルでは動作しないのはなぜですか？

Question

私はjavascriptを使用して画像をプレビューしようとしていましたが、すべてのモーダルで機能しません。すなわち、あるモーダルで動作し、他のモーダルでは機能しません。 Javascript id selectorは、すべてのモーダルで同じIDを選択します。これはjavascriptの問題ですか、どこかでコードが間違っていますか？ $ iなどの定数の値については、すでに定義されています。他の人のように

<?php foreach($bannerDatas as $key=>$value){ ?> 

    <td> 

    <a href="#" class="btn btn-default actionBtnPic" 
       title="Edit" 
       data-toggle="modal" 
       data-target="#myModalUpload<?php echo $z; $z++;?>" 
       style="border-radius: 25%;" > Change Pic </a> 

    </td> 

<?php } ?> 

<?php $j=1; foreach ($bannerDatas as $key=>$value): ?> 

    <div class="modal fade" 
     id="myModalUpload<?php echo $j; $j++;?>" role="dialog"> 

    <div class="modal-dialog modal-lg"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 

      <button type="button" class="close" 
           data-dismiss="modal">&times;</button> 

      <h4 class="modal-title" 
       style="padding: 2rem 0;">Upload New Picture</h4> 

     </div> 
     <div class="modal-body"> 
      <div class="row"> 
      <div class="col-md-3"> 

       <form class="form form-horizontal" 
        action="controller/banner" method="post"> 

       <div class="form-group"> 
        <label class="col-sm-2 control-label">Change with</label> 
        <div class="col-sm-10"> 

        <input type = "file" name="images" 
          id="file-upload" accept="image/*"> 

        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-sm-offset-2 col-md-10"> 
        <button type="submit" class="btn btn-success"> 
         <?php echo ucfirst($act); ?> 
        </button> 
        </div> 
       </div> 
       </form> 
      </div> 
      <div class="col-md-9"> 

       <img id="blah" src="#" a 
        lt="your image" class="img img-responsive" /> 

      </div> 
      </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]); 
        } 
       } 
       $("#file-upload").change(function(){ 
        readURL(this); 
       }); 

      </script> 

     </div> 
     </div> 
    </div> 
</div> 
<!-- Modal --> 
<?php endforeach; ?> 

Answer 1

idがUNIQする必要がある、と言っていると、一度だけ存在することができます。 ではなく、ラッパーを作成し、代わりに

を各画像を追加また、あなたの代わりに `id`は、ページ全体で一意である必要がありますFileReaderの

function readURL(input) { 
 
    var files = Array.from(input.files) 
 

 
    files.forEach(function(file){ 
 
    var img = new Image() 
 
    img.className = 'img img-responsive' 
 

 
    img.onload = function() { 
 
     $('#previews').append(img) 
 

 
     // revoke if you don't need the url for something else 
 
     URL.revokeObjectURL(img.src) 
 
    } 
 
    img.onerror = function(){ 
 
     // not an image 
 
    } 
 
    img.src = URL.createObjectURL(file) 
 
    }} 
 
} 
 

 
$("#file-upload").change(function() { 
 
    readURL(this); 
 
});

<div id="previews"></div>