5

基本上，我有一个非常简单的网站，其根目录如下所示：

/images/
index.html
stuff.js

我想要某种方法来递归遍历 /images/ 目录中的每个文件，并在我网站的一部分中按顺序显示它们。例如，如果 /images/ 包含：

images/a/a.png
images/b.png
images/c.jpg
....

那么 index.html 中的某处将包含：

<img src="images/a/a.png" />
<img src="images/b.png" />
<img src="images/c.jpg" />
....

我的第一个想法是使用 stuff.js 中的 document.write() 函数来执行此操作，但我找不到在 Javascript 中遍历本地文件目录的好方法。我看到了一些关于 AJAX 的东西，但是所有这些示例都涉及编辑现有文件，我显然不想这样做。

我目前的解决方案是手动创建一个包含 /images/ 中所有文件的字符串数组，但这样做让我觉得“必须有更好的方法！”

如果我不清楚，请告诉我。

谢谢！

4

2 回答 2

6

也许最好的方法是使用服务器端语言为您完成，并使用异步 Javascript 请求来显示数据。

此示例使用 PHP 列出指定目录中的所有文件，并xmlhttprequest加载此输出并将结果转换为图像标签：

获取图像.php：

<?php

    //The directory (relative to this file) that holds the images
    $dir = "Images";


    //This array will hold all the image addresses
    $result = array();

    //Get all the files in the specified directory
    $files = scandir($dir);


    foreach($files as $file) {

        switch(ltrim(strstr($file, '.'), '.')) {

            //If the file is an image, add it to the array
            case "jpg": case "jpeg":case "png":case "gif":

                $result[] = $dir . "/" . $file;

        }
    }

    //Convert the array into JSON
    $resultJson = json_encode($result);

    //Output the JSON object
    //This is what the AJAX request will see
    echo($resultJson);

?>

index.html（与 getimages.php 相同的目录）：

<!DOCTYPE html>
<html>
    <head>
        <title>Image List Thing</title>
    </head>
    <body>

        <div id="images"></div>
        <input type="button" onclick="callForImages()" value="Load" />

        <script>

            //The div element that will contain the images
            var imageContainer = document.getElementById("images");



            //Makes an asynch request, loading the getimages.php file
            function callForImages() {

                //Create the request object
                var httpReq = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");

                //When it loads,
                httpReq.onload = function() {

                    //Convert the result back into JSON
                    var result = JSON.parse(httpReq.responseText);

                    //Show the images
                    loadImages(result);
                }

                //Request the page
                try {
                    httpReq.open("GET", "getimages.php", true);
                    httpReq.send(null);
                } catch(e) {
                    console.log(e);
                }

            }


            //Generates the images and sticks them in the container
            function loadImages(images) {

                //For each image,
                for(var i = 0; i < images.length; i++) {

                    //Make a new image element, setting the source to the source in the array
                    var newImage = document.createElement("img");
                    newImage.setAttribute("src", images[i]);

                    //Add it to the container
                    imageContainer.appendChild(newImage);

                }

            }

            </script>

    </body>
</html>

请注意，这只是一个示例。您可能希望确保 AJAX 调用成功，并且 JSON 转换在服务器代码和客户端都有效。

于 2012-11-27T23:35:04.570 回答
1

我偶然发现了这篇文章，因为我正在寻找同样的东西，如何遍历“资源”文件夹中的文件列表，并显示一个网页，其中每个文件都有可点击的快捷方式。

这是我最终得到的网页剪辑：

在此处输入图像描述

这就是我的做法。

我添加了一个非常简单的 ASP.Net 服务，以遍历此文件夹中的文件...

List<OneResourceFile> listOfFilenames = new List<OneResourceFile>();

string Icon = "";
string localFolder = Server.MapPath("../Resources");
string[] fileEntries = Directory.GetFiles(localFolder);
foreach (string fileName in fileEntries)
{
    string filename = System.IO.Path.GetFileName(fileName);
    switch (Path.GetExtension(filename).ToLower())
    {
        case ".pptx":
        case ".ppt":
            Icon = "cssPowerPoint";
            break;
        case ".doc":
        case ".docx":
            Icon = "cssWord";
            break;
        case ".xlsx":
        case ".xlsm":
        case ".xls":
            Icon = "cssExcel";
            break;
        default:
            Icon = "cssUnknown";
            break;
    }
    OneResourceFile oneFile = new OneResourceFile()
    {
        Filename = filename,
        IconClass = Icon,
        URL = "../Resources/" + filename
    };
    listOfFilenames.Add(oneFile);
}

string JSON = JsonConvert.SerializeObject(listOfFilenames);
return JSON;

..它建立了一个OneResouceFile记录列表，每个记录都有一个文件名、一个应用于该快捷方式的 CSS 类（例如，它会给它一个 Excel 图标、一个 PDF 图标等）和该项目的完整 URL。

public class OneResourceFile
{
    public string Filename { get; set; }
    public string IconClass { get; set; }
    public string URL { get; set; }
}

..它返回了一组这样的JSON结果......

[
    {
        Filename: "Mikes Presentation.pptx",
        IconClass: "cssPowerPoint",
        URL: "~/Resources/Mikes Presentation.pptx"
    },
    {
        Filename: "Mikes Accounts.xlsx",
        IconClass: "cssExcel",
        URL: "~/Resources/Mikes Accounts.xlsx""
    }
]

然后，我刚刚得到一些 JQuery 来调用这个 Web 服务，并a href为结果中的每个项目创建一个：

<script type="text/javascript">
    var URL = "/GetListOfResourceFiles.aspx";   //  This is my web service
    $.ajax({
        url: URL,
        type: 'GET',
        cache: false,
        dataType: "json",
        success: function (JSON) {
            // We've successfully loaded our JSON data
            $.each(JSON.Results, function (inx) {

                // Create one <a href> per JSON record, and append it to our list.
                var thelink = $('<a>', {
                    text: this.Filename,
                    title: this.Filename,
                    href: this.URL,
                    class: this.IconClass
                }).appendTo('#ListOfResources');
            });
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("$.ajax error: " + xhr.status + " " + thrownError);
        }  
    });
</script>

<p id="ListOfResources">

然后，您需要为 、 等添加一些 CSS 样式cssPowerPoint，cssExcel以提供与a hrefsa 相关的图标，例如：

.cssPowerpoint
{
    vertical-align: top;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center 5px;
    background-image: url(/Images/Icons/icnPowerPoint.png);
    width: 100px;
    height: 60px;
    padding-top: 60px;
    text-decoration: none;
    display:inline-block;
    color: #666;
    margin-left: 20px;
}

就是这样。酷，嘿？

于 2015-07-02T07:16:22.113 回答