Динамически изменять содержание изображения в поповере - PullRequest
Новая
       21

Динамически изменять содержание изображения в поповере

0 голосов
/ 14 марта 2020

Это мой 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);                                   
    }                                                                     
}

Это загружает изображение и показывает выбранное изображение только во всплывающем окне, если я меняю изображение в загружаемом файле, оно все равно показывает первое изображение во всплывающем окне, независимо от того, как много раз я выбираю другое изображение.

1 Ответ

0 голосов
/ 28 марта 2020

Попробуйте использовать $ (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>
...