jquery - 如何在单击按钮时查看图像？

Question

如何通过点击附近按钮查看图像文件？这里输入类型文件是动态创建的。

查看，

$(document).on("click", "#idImgView", function() {
  var idProjectTitle = document.getElementsByClassName("idProjectTitle");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projectidAppe" class="form-group">
  <label>Project Photos</label>
  <div class="form-group file-uploader">
    <div class="input-group col-xs-12">
      <span class="input-group-addon"></span>
      <input type="text" id="txtProjectTitle-0" style="height: 35px !important" class="form-control input-lg" disabled="" placeholder="download.jpg">
      <div id="clearbtn-0" class="input-group-btn">
        <div class="browse btn btn-primary" style="display: none;">
          Browse
          <input type="file" accept="image/*" class="idProjectTitle file" name="fileUploadphoto-0">
        </div>
        <div id="idImgDelete" class="browse btn btn-primary">Delete</div>
        <div id="idImgView" class="browse btn btn-primary">View</div>
      </div>
    </div>
  </div>
  <div class="form-group file-uploader">
    <div class="input-group col-xs-12">
      <span class="input-group-addon"></span>
      <input type="text" id="txtProjectTitle-1" style="height: 35px !important" class="form-control input-lg" disabled="" placeholder="Lotus_flower.jpg~c200.jpg">
      <div id="clearbtn-1" class="input-group-btn">
        <div class="browse btn btn-primary" style="display: none;"> Browse<input type="file" accept="image/*" class="idProjectTitle file" multiple="multiple" name="fileUploadphoto-1"></div>
        <div id="idImgDelete" class="browse btn btn-primary">Delete</div>
        <div id="idImgView" class="browse btn btn-primary">View</div>
      </div>
    </div>
  </div>
</div>

使用document.getElementsByClassName可以实现这一点吗？怎么才能做到这一点？

Answer 1

您可以使用 DOM 遍历方法来定位所需的元素。使用.closest()要遍历到共同父级，然后使用 .find()以定位元素。

注意标识符必须是唯一的，这是代码片段。在片段中 .get()用于获取DOM元素的引用。

$(document).on("click", ".idImgView", function() {
  var sourceElement = $(this).closest(".file-uploader").find('.idProjectTitle').get(0);
  var target = $(this).closest(".file-uploader").find('.imagedisplay').get(0);

  var reader = new FileReader();
  reader.onload = function(e) {
    target.src = e.target.result;
  }
  reader.readAsDataURL(sourceElement.files[0]);
  console.log(sourceElement.files)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projectidAppe" class="form-group">
  <div class="form-group file-uploader">
    <div class="input-group col-xs-12">
      <div id="clearbtn-0" class="input-group-btn">
        <div class="browse btn btn-primary">
          Browse
          <input multiple type="file" accept="image/*" class="idProjectTitle file" name="fileUploadphoto-0">
        </div>
        <button class="browse btn btn-primary idImgView">View</button>
        <img class="imagedisplay" src="" width="100"/>
      </div>
    </div>
  </div>
</div>