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

由于您正在使用jQuery，因此您只需使用以下选择器即可获得idProjectTitle类的所有元素：

var idProjectTitle = $('.idProjectTitle');

注意： id在同一文档中应该是唯一的，因此请尝试用公共类或递增的标识符替换idImgDelete。

希望这有帮助。

Answer 2

您可以使用DOM遍历方法来定位所需的元素。使用.closest()遍历普通父母，然后使用.find()定位元素。

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

＆＃13;

$(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)
});

＆＃13;

<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>

＆＃13;

如何在点击按钮上查看图像？

2 个答案: