Question

我有一个有两页的文件。第一个通过表单提交

发送文件夹名称

        <form method="post" >
            <input type="hidden" name="portfolio" value="directory">
            <input type="submit" value="author">
        </form>

第二个接收此文件夹名称并使用glob函数

打开文件

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

...最终图像再次通过Ajax出现在第一页

        $(document).ready(function(){
            $('form').submit(function(e) {
                var data = $(this).serialize();
                e.preventDefault();
                $.ajax({
                    url: "PAGE2.php",
                    data: data,
                    type: "POST",
                    dataType: "json",
                    success: function(response) {
                        var html = "";
                        $.each(response, function(i, val) {
                            var fileExtension = val.substring(val.lastIndexOf('.'));
                            if (fileExtension == ".jpg") {
                                html += '<img src="'+val+'" height=250></img>';
                            }
                            else if (fileExtension == ".mp4") {
                                html += '<video width="320" height="240" src="'+val+'" type="video/mp4"controls autoplay loop></video>';
                            }
                        });
                        $("#display").html(html);
                    }
                });
            });
        });

到此为止没有href标签...... 我需要知道如何使用colorbox插件显示图像库等图像。我没有成功地试过这个

        $(document).ready(function(){
            $('form').submit(function(e) {
                var data = $(this).serialize();
                e.preventDefault();
                $.ajax({
                    url: "PAGE2.php",
                    data: data,
                    type: "POST",
                    dataType: "json",
                    success: function(response) {
                        var html = "";
                        $.each(response, function(i, val) {
                            var fileExtension = val.substring(val.lastIndexOf('.'));
                            if (fileExtension == ".jpg") {
                                html += '<img src="'+val+'" height=250></img>';
                            }
                            else if (fileExtension == ".mp4") {
                                html += '<video width="320" height="240" src="'+val+'" type="video/mp4"controls autoplay loop></video>';
                            }
                        });
                        $("#display").html(html);
                        $("#link").colorbox({ inline:true, href: "#display"});
                    }
                });
            });
        }); 
<body>
    ... 
    <div id="display" style="display:none;"></div> 
    <a id="link" style="display:none"></a>
</body>

page1.php中

＆＃13;

<!DOCTYPE HTML>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>page1</title>
    <link rel="stylesheet" href="colorbox.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="../jquery.colorbox.js"></script>
    <script>
        $(function() { 
            $("#formID").submit(function() {
                $.post($(this).attr("action"), $(this).serialize(), function(data) {
                    $.colorbox({
                        html:data,
                        rel:'group1'
                    });
                },
                       'html');
                return false;
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <form action="page2.php" method="post" id="formID">
            <input type="hidden" name="var" value="directory">
            <input type="submit" value="author">
        </form>   
    </div>
</body>
</html>

＆＃13;

使page2.php

＆＃13;

<!DOCTYPE HTML>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>page2</title>
</head>
    
<body>
<?php
$variable = $_POST['var'];
$img_dir = $variable . "/";
foreach(glob($img_dir . '*.jpg') as $image) {
echo '<img src="'.$image.'">'.'<img class="group">';
}
?>
</body>
</html>

＆＃13;

如何使用表单提交触发颜色框库

0 个答案: