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

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>

Answer 2

由于您使用jQuery的你可以只使用以下的选择让所有的元素与idProjectTitle类：

var idProjectTitle = $('.idProjectTitle'); 

注：id应该是同一个文档中唯一的，这样试图取代idImgDelete由共同的类或增加的标识符。

希望这会有所帮助。