부트 스트랩 모달 박스에서 이미지 미리보기를 표시하는 방법?

Question

자바 스크립트로 이미지 미리보기 인라인 HTML 전에 파일 업로드를 코딩했습니다. 하지만 부트 스트랩 모달 팝업 상자에 이미지 미리보기를 표시해야합니다. HTML 인라인이 아닙니다. 코드를 어떻게 변경해야합니까? 여기 내 코드가있다.

<script> 

$(document).on('click','.close',function(){ 
    $(this).parents('span').remove(); 
}) 

document.getElementById("uploadBtn").onchange = function() { 
    document.getElementById("uploadFile").value = this.value; 
}; 

document.getElementById('uploadBtn').onchange = uploadOnChange; 

function uploadOnChange() { 
    var filename = this.value; 
    var lastIndex = filename.lastIndexOf("\\"); 
    if (lastIndex >= 0) { 
    filename = filename.substring(lastIndex + 1); 
    } 
    var files = $('#uploadBtn')[0].files; 
    for (var i = 0; i < files.length; i++) { 
    (function(i) { 
     $("#upload_prev").append('<div><span><br><div class="col-md-10"><span class="uploadFiles">' + '<a href="" data-toggle="modal" data-target="#myModal">' + files[i].name + '</a>' + '</span><br><label class="filelink"></label></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></span></div>'); 
    $("#upload_prev a:contains(" + files[i].name + ")") 
    .on("click", function(e) { 
     e.preventDefault(); 
     var close = $(this).closest("div") 
     .find(".filelink"); 
     if (!$(this).closest("div") 
     .find("img").length) 
     close 
     .after(
      $('<img>', { 
      src: URL.createObjectURL(files[i]) 
      }).width('50%').height('50%') 
     ) 
     else 
     close.siblings("img").toggle() 
    }) 
    })(i); 
} 
    document.getElementById('filename').value = filename; 
} 

Answer 1

이 코드는 당신에게 미리보기 이미지를 표시하는 방법을 기본 아이디어를 줄 :

<input id="uploadBtn" type="file" class="upload" multiple="multiple" accept="image/*" name="browsefile" style="display: none !important;" /> 

<input type="button" value="ファイル追加" onclick="document.getElementById('uploadBtn').click();" style="float: right;"/> 

<input id="filename" type="hidden" /> 
    <br> 
<div id="upload_prev"></div> 
<div style="clear:both;"></div> 

여기 내에 javscript 코드입니다. 파일 onChange 동안 이미지를 읽고 src 값을 다른 이미지 필드로 설정하십시오.

function readURL(input, id) { 
 
     if (input.files && input.files[0]) { 
 
      var reader = new FileReader(); 
 

 
      reader.onload = function (e) { 
 
       $('#' + id).attr('src', e.target.result); 
 
      } 
 

 
      reader.readAsDataURL(input.files[0]); 
 
     } 
 
    } 
 

 
    $("#uploadBtn").change(function() { 
 
     readURL(this, 'photoShowId'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="uploadBtn" type="file" class="upload" multiple="multiple" accept="image/*" name="browsefile" /> 
 
     <div id="upload_prev"> 
 
     <img id="photoShowId" src="" width="120" height="150" style="border: 1px solid blue" /> 
 
     </div>

Answer 2

감사 너희들. 지금은 부트 스트랩 모달로 미리보기를 보여줄 수 있습니다. 여기 내 변경 코드입니다.

<input id="uploadBtn" type="file" class="upload" multiple="multiple" accept="image/*" name="browsefile" style="display: none !important;" /> 

<input type="button" value="ファイル追加" onclick="document.getElementById('uploadBtn').click();" style="float: right;"/> 

<input id="filename" type="hidden" /> 
    <br> 
<div id="upload_prev"></div> 
<div style="clear:both;"></div> 
<!-- Modal --> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <div class="image_preview"> 
      <label class="filelink"></label> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 
    </div> 
    </div> 

여기 내 자바 스크립트가 변경되었습니다.

<script type="text/javascript"> 
$(document).on('click','.close',function(){ 
    $(this).parents('span').remove(); 
}) 

document.getElementById("uploadBtn").onchange = function() { 
    document.getElementById("uploadFile").value = this.value; 
}; 

document.getElementById('uploadBtn').onchange = uploadOnChange; 

    function uploadOnChange() { 
    var filename = this.value; 
    var lastIndex = filename.lastIndexOf("\\"); 
    if (lastIndex >= 0) { 
     filename = filename.substring(lastIndex + 1); 
    } 
    var files = $('#uploadBtn')[0].files; 
    for (var i = 0; i < files.length; i++) { 
     (function(i) { 
      $("#upload_prev").append('<div><span><br><div class="col-md-10"><span class="uploadFiles">' + '<a href="" data-toggle="modal" data-target="#myModal">' + files[i].name + '</a>' + '</span><br><label class="filelink"></label></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></span></div>'); 
      $("#upload_prev a:contains(" + files[i].name + ")") 
    .on("click", function(e) { 
     e.preventDefault(); 
     var close = $('#myModal').closest("div") 
     .find(".filelink"); 
     if (!$('#myModal').closest("div") 
     .find("img").length) 
     close 
     .after(
      $('<img>', { 
      src: URL.createObjectURL(files[i]) 
      }).width('70%').height('70%') 
     ) 
     else 
     close.siblings("img").toggle() 
    }) 
    })(i); 
} 
    document.getElementById('filename').value = filename; 
} 
</script>