图像预览模式 [英] Image preview modal

问题描述

我正在尝试在上传之前预览图像。但它只能在Microsoft Edge中预览，而不能在其他浏览器中预览。如何使这个bootstrap模态浏览器兼容。

  var  modal =  document  .getElementById（'  imageModal' ）; 
  var  img =  document  .getElementById（'   URI'）; 
  var  modalImg =  document  .getElementById（   img01）; 
 $（ ＃URI）。on（{
 change：< span class =code-keyword> function （）{
 $（' ＃imageModal '）。modal（'  show'）
 
 modalImg .src = img.value; 
 
}）; 
 

 <   div     class   =  modal fade    id   =  imageModal    tabindex   =   -  1   角色  = 对话框    aria-labelledby   =  imageModalLabel    ari a-hidden   =  true > ;  
 <   div     class   =  modal-dialog   角色  =  document >  
 <   div     class   =  modal-content >  
 <   div     class   =  modal-header >  
 <   h5     class   =  modal-title    id   =  imageModalLabel  > 图像预览<   / h5   >  
 <  按钮    type   = 按钮    class   =  close    data-dismiss   =  modal    aria-label   =  关闭 >  
 <   span     aria-hidden   =  true > ×<   / span  >  
 <   / button  >  
 <   / div  >  
 <   div     class   =  modal-body >  
 <   img     class   =  modal-content-img normal    id   =  img01 >  <   br    < span class =code-keyword> /  >  
 <   / div  >  
 <   div     class   =  modal-footer >  
 <  按钮   类型  = 按钮    class   =  btn btn-primary    id   = 标题 > 旋转<   / button  >  
 <  按钮   类型  =  submit     class   = < span class =code-keyword> btn btn-primary    id   =  modalSave < span class =code-keyword>> 保存更改<   / button  < span class =code-keyword>>  
 <  按钮    type   =  button    class   =  btn btn-secondary    data -dismiss   =  modal > 关闭<   / button  >  
 <   / div  >  
 <   / div  >  
 <  < span class =code-leadattribute> / div  >  
 <   / div  >  

我尝试过：



我已经从getbootstrap实现了bootstrap模式.com

解决方案

（ #URI）。on（{
change： function （）{

（' ＃imageModal'）。modal（ show'）

modalImg.src = img.value;

}）;

 <   div     class   =  modal fade    id   =  imageModal    tabindex   =   -  1   角色  = 对话框    aria-labelledby   =  imageModalLabel    ari a-hidden   =  true > ;  
 <   div     class   =  modal-dialog   角色  =  document >  
 <   div     class   =  modal-content >  
 <   div     class   =  modal-header >  
 <   h5     class   =  modal-title    id   =  imageModalLabel  > 图像预览<   / h5   >  
 <  按钮    type   = 按钮    class   =  close    data-dismiss   =  modal    aria-label   =  关闭 >  
 <   span     aria-hidden   =  true > ×<   / span  >  
 <   / button  >  
 <   / div  >  
 <   div     class   =  modal-body >  
 <   img     class   =  modal-content-img normal    id   =  img01 >  <   br    < span class =code-keyword> /  >  
 <   / div  >  
 <   div     class   =  modal-footer >  
 <  按钮   类型  = 按钮    class   =  btn btn-primary    id   = 标题 > 旋转<   / button  >  
 <  按钮   类型  =  submit     class   = < span class =code-keyword> btn btn-primary    id   =  modalSave < span class =code-keyword>> 保存更改<   / button  < span class =code-keyword>>  
 <  按钮    type   =  button    class   =  btn btn-secondary    data -dismiss   =  modal > 关闭<   / button  >  
 <   / div  >  
 <   / div  >  
 <  < span class =code-leadattribute> / div  >  
 <   / div  >  

我尝试过：



我已经从getbootstrap实现了bootstrap模式.com

你所拥有的不应该工作 - 从互联网上加载的页面不能从用户的本地文件系统加载文件。它在Edge中工作的事实对我来说似乎是个错误。



您可以使用 URL.createObjectURL [ ^ ]或 FileReader.readAsDataURL [ ^ ]加载图像的预览。两者都适用于所有版本的Chrome，Firefox，Opera，Safari和Edge，并且可以在IE10或更高版本中使用。

I am trying to preview a image before uploading it. But it only gets previewed in Microsoft Edge and not in other browsers. How can I make this bootstrap modal browser compatible.

var modal = document.getElementById('imageModal');
       var img = document.getElementById('URI');
       var modalImg = document.getElementById("img01");
       $("#URI").on({
           change: function () {
               $('#imageModal').modal('show')

               modalImg.src = img.value;

       });

<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <img class="modal-content-img normal" id="img01"><br />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="caption">Rotate</button>
                            <button type="submit" class="btn btn-primary" id="modalSave">Save changes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

What I have tried:

I have implemented the bootstrap modal from getbootstrap.com

解决方案

("#URI").on({ change: function () {

('#imageModal').modal('show') modalImg.src = img.value; });

<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <img class="modal-content-img normal" id="img01"><br />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="caption">Rotate</button>
                            <button type="submit" class="btn btn-primary" id="modalSave">Save changes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

What I have tried:

I have implemented the bootstrap modal from getbootstrap.com

What you've got shouldn't work - a page loaded from the internet should not be able to load a file from the user's local file system. The fact that it works in Edge seems like a bug to me.

You can either use URL.createObjectURL[^] or FileReader.readAsDataURL[^] to load a preview of the image. Both will work in all versions of Chrome, Firefox, Opera, Safari and Edge, and will work in IE10 or later.

这篇关于图像预览模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！