Question

我试图使用javascript预览图像，但它不适用于所有模态，即它适用于一个模态并且不适用于其他模态。 Javascript id选择器也在所有模态中选择相同的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; ?>

为什么以下代码适用于一个模型但不能与另一个模型一起使用？

0 个答案: