动态更改弹出框中的图像内容答案

【问题标题】：Dynamically change image content in popover动态更改弹出框中的图像内容
【发布时间】：2020-06-26 08:47:59
【问题描述】：

这是我的html

<div class="col-12 custom-file" data-toggle="popover-hover">         
    <input type="file" id="fileUpload" class="custom-file-input"  
           accept=".jpg,.png,.jpeg">                                 
    <label class="custom-file-label">Choose file</label>             
</div>

这是我的js

on page load

$('[data-toggle="popover-hover"]').popover({                                                            
    html: true,                                                                                         
    trigger: 'hover',                                                                                   
    placement: 'bottom',                                                                                
        content: function () {                                                                          
        return '<img style="max-width: 400px; max-height: 400px;" src="' + $(this).data('img') + '" />';
    }                                                                                                   
});

这就是我为图像设置数据的方式

setFile: function (file) {                                                
    document.querySelector(DOMStrings.fileName).innerHTML = file.name;    

    let fileReader = new FileReader();                                    
    fileReader.addEventListener('load', function () {                     
        console.log(fileReader.result);                                   

        let element = document.querySelector(DOMStrings.customFileHolder);
        if (element.hasAttribute('data-img'))                             
            element.removeAttribute('data-img');                          
        element.setAttribute('data-img', fileReader.result);              
    }, false);                                                            
    if (file) {                                                           
        fileReader.readAsDataURL(file);                                   
    }                                                                     
}

这会加载图像并仅在第一次弹出窗口中显示所选图像，如果我在文件上传中更改图像，无论我选择多少次另一个图像，它仍然会在弹出窗口中显示第一张图像.

【问题讨论】：

当您选择不同的图像时，您的setFile 函数是否被调用？
是的，每次
一般提示：人称代词“I”（指自己时）是大写字母，没有例外。你已经在这里足够长的时间知道这一点。请在写你的问题时努力。
一般提醒：您无需在问题中添加人们在需要更多信息时询问您的建议。他们知道 Stack Overflow 是如何工作的，我们当然不需要在我们这里的数百万个问题中添加使用说明。请不要在以后添加此内容。
一般提醒：无需添加您的感谢、问候、赞赏等。在 Stack Overflow 上，技术写作是首选，当我们找到它时，我们会删除“绒毛”。请怜悯这里的志愿编辑 - 考虑到呈现的策展量，我们没有足够的人可以四处走动。如果我们要清理故意藐视惯例的海报，也更加困难。

标签： jquery html bootstrap-4 popover

【解决方案1】：

尝试使用 $(this).attr('data-img')

   $('[data-toggle="popover-hover"]').popover({                                                      
        html: true,                                                                           
        trigger: 'hover',                                                                                   
        placement: 'bottom',                                                                                
            content: function () {                                                                          
            return '<img style="max-width: 400px; max-height: 400px;" src="' + $(this).attr('data-img') + '" />';
        }                                                                                                   
    });

运行以下代码片段

$('input').change(
function(event){
 debugger
  let file=event.target.files[0];
  let src=window.URL.createObjectURL(file);
   $('.custom-file').removeAttr('data-img');
  $('.custom-file').attr('data-img',src);
}
);
                     
$('[data-toggle="popover-hover"]').popover({                                                      
    html: true,                                                                           
    trigger: 'hover',                                                                                   
    placement: 'bottom',                                                                                
        content: function () {                                                                          
        return '<img style="max-width: 400px; max-height: 400px;" src="' + $(this).attr('data-img') + '" />';
    }                                                                                                   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
   <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="col-12 custom-file" data-toggle="popover-hover">         
    <input type="file" id="fileUpload" class="custom-file-input"  
           accept=".jpg,.png,.jpeg">                                 
    <label class="custom-file-label">Choose file</label>             
</div>

【讨论】：