使用jquery或Ajax将服务器上的目录hirerachy填充到多个html下拉列表中

时间:2015-06-04 03:13:39

标签: javascript php jquery html ajax

我是使用jQuery和Ajax的初学者。

我在服务器上有以下目录层次结构。 enter image description here

我想像这样动态地将文件层次结构放入下拉列表中 enter image description here

OnClick of" Search"按钮,应显示带有所选下拉值的下载URL(如下所示) " http://abc.def.com/ProductName1/Series1.1/FileName1.1.zip"

我知道实现这一目标的最佳方法是使用jQuery和Ajax。
如何制作"产品名称"的目录层次结构?在服务器上动态显示?以及相应的"产品系列"和"文件"每当选择新的产品名称时更改?

1 个答案:

答案 0 :(得分:0)

这是一个真正的基本布局。这个特殊的解决方案会自行调用,但您可以将其拆分为两页。要进行多次调用以构建下拉列表,您可能可以使用函数,因为在向下钻取文件夹时逻辑可能会重复:

<强>的index.php

<?php
    error_reporting(E_ALL);
    if(isset($_POST['scan']) && !empty($_POST['scan'])) {
        // For your convenience, you can see what returns
        print_r($_POST);
        $filter[]   =   '.';
        $filter[]   =   '..';
        // Decode directory string from form
        $dir        =   base64_decode(urldecode($_POST['dir']));
        // Add root (you may have defined a root, but I am
        // using the server document root key/value
        $current    =   str_replace("//","/",$_SERVER['DOCUMENT_ROOT'].$dir);
        // Check that the directory exists
        if(is_dir($current)) {
            // Scan this directory
            $files  =   scandir($current);
            // If there are folders/files
            if(!empty($files)) { ?>
        <label>Series</label>
        <select name="series">
            <?php
                foreach($files as $infolder) {
                    // If just return directories
                    if(is_dir($current.$infolder) && !in_array($infolder,$filter)) { ?>
                        <option name="<?php echo urlencode(base64_encode($infolder)); ?>"><?php echo substr($infolder,0,20); ?></option>
                    <?php
                    }
                } ?>
        </select>
            <?php
            }
        }
        // Exit so you don't continue to print the bottom stuff
        // Which is what you would load in the first place
        exit;
    }

// These are just fake, obviously. You can populate the
// first dropdown however you want
$dir        =   "/root/";
$dir2   =   "/root/folder1/";
?>

<form id="get_files" method="post">
    <input type="hidden" name="scan" value="true" />
    <select name="dir">
        <!-- This encoding just makes it easier to transport this data -->
        <!-- base64 is probably itself sufficient -->
        <option value="<?php echo urlencode(base64_encode($dir)); ?>"><?php echo substr($dir,0,10); ?></option>
        <option value="<?php echo urlencode(base64_encode($dir2)); ?>"><?php echo substr($dir2,0,10); ?></option>
    </select>
    <div id="form_load"></div>
    <input type="submit" value="submit" />
</form>

<!-- jQUERY LIBRARIES -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<!-- jQUERY AJAX -->
<script>
    $("#get_files").submit(function() {
        $.ajax({
                url: 'index.php',
                data: $(this).serialize(),
                type: 'POST',
                success: function(response) {
                    $("#form_load").html(response);
                }
        });
        return false;
    });
</script>