Javascript 如何在引导模式框中显示图像预览？

我已经完成了编码文件上传之前，图像预览内联html与javascript。但我需要在引导模式弹出框中显示图像预览。不是在HTML内联中。我应该如何更改代码？这是我的密码

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

以下是我的脚本代码：

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

$（文档）.on（'click'，'.close'，函数（）{
$（this.parents（'span'）.remove（）；
})
document.getElementById（“uploadBtn”）.onchange=function（）{
document.getElementById（“uploadFile”）.value=this.value；
};
document.getElementById（'uploadBtn'）。onchange=uploadOnChange；
函数uploadOnChange（）{
var filename=this.value；
var lastIndex=filename.lastIndexOf（“\\”）；
如果（lastIndex>=0）{
filename=filename.substring（lastIndex+1）；
}
var files=$（'#uploadBtn'）[0]。文件；
对于（var i=0；i'++'
削除
 
”）；
$（“#upload_prev a:包含（“+文件[i].name+”）
.在“点击”时，功能（e）{
e、 预防默认值（）；
var close=$（此）.closest（“div”）
.find（“.filelink”）；
if（！$（this）.最近的（“div”）
.查找（“img”）.长度）
关闭
.之后(
$('
此代码片段为您提供了如何显示预览图像的基本概念。在更改文件的过程中，读取图像并将src值设置为另一个图像字段




函数readURL（输入，id）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#'+id）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
$（“#uploadBtn”）.change（函数（）{
readURL（这是“photoShowId”）；
})；
谢谢你们。现在我可以在引导模式中显示预览。这是我的更改代码

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




&时代；
情态标题
接近
保存更改

这是我的javascript更改

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


$（文档）.on（'click'，'.close'，函数（）{
$（this.parents（'span'）.remove（）；
})
document.getElementById（“uploadBtn”）.onchange=function（）{
document.getElementById（“uploadFile”）.value=this.value；
};
document.getElementById（'uploadBtn'）。onchange=uploadOnChange；
函数uploadOnChange（）{
var filename=this.value；
var lastIndex=filename.lastIndexOf（“\\”）；
如果（lastIndex>=0）{
filename=filename.substring（lastIndex+1）；
}
var files=$（'#uploadBtn'）[0]。文件；
对于（var i=0；i'++'
削除
 
”）；
$（“#upload_prev a:包含（“+文件[i].name+”）
.在“点击”时，功能（e）{
e、 预防默认值（）；
var close=$（“#myModal”）.最近的（“div”）
.find（“.filelink”）；
如果（！$（'#myModal'）。最近的（“div”）
.查找（“img”）.长度）
关闭
.之后(
$('
此问题已被询问，请在发布前搜索答案，如果我的答案正确，请检查此项，然后您可以接受我的答案。