버튼 클릭시 이미지를 보는 방법?

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'); 

참고 : 그래서 idImgDelete를 교체하려고id이 같은 문서에서 고유해야합니다 공통 클래스 또는 증분 된 식별자로

희망이 도움이됩니다.