How to show image preview in Bootstrap Modal Box?

Question

I have done coding file upload before image preview inline html with javascript. But i need to show image preview in Bootstrap Modal Popup Box. Not in HTML Inline. How should i change my code? Here is my codes.

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

Here is my Javscript Code:

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

This question is already asked, please search for answers before posting, check this http://stackoverflow.com/a/25023822/6448640 — , May 02 '17 at 06:33

score 3 · Answer 1 · answered May 02 '17 at 06:38

This code snippet give you a basic idea how to show preview image. During onChange your file, read the image and set src value to another image field.

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>

score 0 · Answer 2 · answered May 02 '17 at 06:44

Thanks you guys. For now I can show preview in bootstrap modal. Here is my changes code.

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

Here is my javascript changes.

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

How to show image preview in Bootstrap Modal Box?

2 Answers2