如何遍历本地（服务器端）文件夹的所有元素？
Posted
技术标签:
【中文标题】如何遍历本地（服务器端）文件夹的所有元素？【英文标题】：How can I iterate through all elements of local (server-side) folder? 【发布时间】：2012-11-15 17:11:24 【问题描述】：基本上，我有一个非常简单的网站，其根目录如下所示：
/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/ 中所有文件的字符串数组，但这样做让我觉得“必须有更好的方法！”
如果我不清楚，请告诉我。
谢谢！
【问题讨论】：
如果你在同一个句子中使用“javascript”和“file I/O”，你说的是节点，而不是客户端 JS。 【参考方案1】：也许最好的方法是使用服务器端语言为您完成，并使用异步 Javascript 请求来显示数据。
此示例使用 php 列出指定目录中的所有文件，并使用 xmlhttprequest 加载此输出并将结果转换为图像标签：
getimages.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 转换在服务器代码和客户端都有效。
【讨论】：
非常感谢！不胜感激。一个快速的问题：我希望所有这一切都自动发生。例如： 其中 init() 的第一行是对 callForImages() 的调用。我会遇到同步问题吗？ IE。客户端代码在服务器代码准备好所有信息之前进行调用。 @ScoWalt 您可以随意调用callForImages，并且不会遇到任何问题。但是，您可能希望在更新容器 div 元素时清除它。一个快速混乱的方法是设置它的innerHTML = ""。
你可能想在 php 文件中更改一件事： switch(ltrim(strstr($file, '.'), '.')) to switch(strtolower(ltrim(strstr( $file, '.'), '.'))) 那么它也会拾取 .JPG .Jpeg 文件，而不仅仅是 .jpeg。【参考方案2】：
我偶然发现了这篇文章，因为我正在寻找同样的东西，如何遍历“资源”文件夹中的文件列表，并显示一个带有每个文件的可点击快捷方式的网页。
这是我最终得到的网页片段：
我是这样做的。
我添加了一个非常简单的 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 图标等）和一个完整的商品的网址。
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">
然后，您只需为cssPowerPoint、cssExcel 等添加一些 CSS 样式，为a hrefs 提供相关图标，例如：
.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;
就是这样。酷，嘿？
【讨论】：
以上是关于如何遍历本地（服务器端）文件夹的所有元素？的主要内容，如果未能解决你的问题，请参考以下文章