title: How to show image preview in Bootstrap Modal Box?
body: <p>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.</p>
  
  <pre><code>&lt;input id="uploadBtn" type="file" class="upload" multiple="multiple" accept="image/*" name="browsefile" style="display: none !important;" /&gt;
  
  &lt;input type="button" value="ファイル追加" onclick="document.getElementById('uploadBtn').click();" style="float: right;"/&gt;
  
  &lt;input id="filename" type="hidden" /&gt;
    &lt;br&gt;
  &lt;div id="upload_prev"&gt;&lt;/div&gt;
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is my Javscript Code:</p>
  
  <pre><code>&lt;script&gt;
  
  $(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 &gt;= 0) {
      filename = filename.substring(lastIndex + 1);
    }
    var files = $('#uploadBtn')[0].files;
    for (var i = 0; i &lt; files.length; i++) {
     (function(i) {
        $("#upload_prev").append('&lt;div&gt;&lt;span&gt;&lt;br&gt;&lt;div class="col-md-10"&gt;&lt;span class="uploadFiles"&gt;' + '&lt;a href="" data-toggle="modal" data-target="#myModal"&gt;' + files[i].name + '&lt;/a&gt;' + '&lt;/span&gt;&lt;br&gt;&lt;label class="filelink"&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class="col-md-2"&gt;&lt;p class="close" style="font-size: 13pt;"&gt;削除&lt;/p&gt;&lt;br&gt;&lt;/div&gt;&lt;/span&gt;&lt;/div&gt;');
    $("#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(
            $('&lt;img&gt;', {
              src: URL.createObjectURL(files[i])
            }).width('50%').height('50%')
          )
        else
          close.siblings("img").toggle()
      })
    })(i);
   }
    document.getElementById('filename').value = filename;
   }
  </code></pre>
  
  <p></p>