Как загрузить какой-либо тип файла в модале начальной загрузки с помощью AJAX - PullRequest
Новая
       8

Как загрузить какой-либо тип файла в модале начальной загрузки с помощью AJAX

0 голосов
/ 23 января 2019

У меня здесь простой мод начальной загрузки: https://jsfiddle.net/blacode/kecyrv4q/
Я пытаюсь сделать то же самое, но удаленно с ajax.Я добавил немного больше сложности, добавив функцию glob (PHP) для поиска изображения в определенном каталоге с проверкой типа изображения в запросе ajax.Вот код:
index.php 

    <body>
        <div class="container">
            <h2>Basic Modal Example</h2>

            <!-- Trigger the modal -->
            <a href="image.php" class="modalImage" data-toggle="modal" data-var="images/image/">
                <img class="img-fluid" src="image.png" alt="" style="width:20%">
            </a>

            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog modal-lg">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <img class="img-fluid img-responsive" src="" alt="">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                    <!-- Close modal content-->

                </div>
            </div>
            <!-- Close modal -->

        </div>
        <!-- Close container -->

    </body>

страница для поиска изображения в определенном каталоге (image.php): 

<?php
header('Content-Type: application/json');
$directory = $_POST['var'];
echo json_encode (glob($directory. '*.{png,mp4}', GLOB_BRACE));
?>

ajax-запрос: 

$(document).ready(function(){
$('.modalImage').click(function (event) {
event.preventDefault();
var data = this.dataset;

        $.ajax({
            url: "image.php",
            data: data,
            type: "POST",
            dataType: "json",
            success: function(data) {
                var imgs = data.map(function(img) {
                    var html = "";
                    var fileExtension = img.substring(img.lastIndexOf('.'));
                    if (fileExtension == ".png") {
                        return html = '<img src="'+img+'"></img>';
                        $('.modal-body').load(html,function(){
                            $('#myModal').modal({show:true});
                        });
                    }
                });
            } 
        });
    });
});

К сожалению, страница не отвечает.На консоли отображаются следующие предупреждения: 

unreachable code after return statement  
ReferenceError: $ is not defined

Есть ли способ сделать это?

1 Ответ

0 голосов
/ 23 января 2019

Вы возвращаетесь из функции, прежде чем пытаться установить HTML и показ модальной. Просто установите значение html, а затем html элемента .modal-body, как показано ниже.

Что касается проблемы с $ undefined, то перед этим сценарием необходимо сослаться на jQuery. 

<script src="https://code.jquery.com/jquery-3.3.1.js" 
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" 
        crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        $('.modalImage').click(function (event) {
            event.preventDefault();
            var data = this.dataset;

            $.ajax({
                url: "image.php",
                data: data,
                type: "POST",
                dataType: "json",
                success: function(data) {
                    var imgs = data.map(function(img) {
                        var html = "";
                        var fileExtension = img.substring(img.lastIndexOf('.'));
                        if (fileExtension == ".png") {
                            html = '<img src="'+img+'"></img>';
                            $('.modal-body').html(html);
                            $('#myModal').modal({show:true});

                        }
                    });
                } 
            });
        });
    });
</script>
...