Pratik Naik Ответов: 1

Предварительный просмотр изображения модальный

Я пытаюсь просмотреть изображение перед его загрузкой. Но он просматривается только в Microsoft Edge, а не в других браузерах. Как я могу сделать этот bootstrap модальный браузер совместимым?

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>



Что я уже пробовал:

Я реализовал модальный bootstrap из getbootstrap.com

1 Ответов

Рейтинг:
10

Richard Deeming

Что у тебя есть не должен работа - страница, загруженная из интернета, не должна иметь возможности загрузить файл из локальной файловой системы пользователя. Тот факт, что он работает в Edge, кажется мне ошибкой.

Вы можете либо использовать URL-адрес.createObjectURL[^] или FileReader.readAsDataURL[^] для загрузки предварительного просмотра изображения. Оба будут работать во всех версиях Chrome, Firefox, Opera, Safari и Edge, а также в IE10 или более поздней версии.

$("#URI").on({
    change: function () {
        if (this.files && this.files[0]){
            modalImg.src = URL.createObjectURL(this.files[0]);
            $('#imageModal').modal('show');
        }
    }
});

Pratik Naik

Спасибо!!! Это решило проблему :D

0x01AA

Если это помогло, чем я даю 5 ;)