Sco*_*alt 3 html javascript directory file-io
基本上,我有一个非常简单的网站,其根目录如下所示:
/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请求来显示数据.
此示例使用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转换在服务器代码和客户端上都有效.
| 归档时间： |
|
| 查看次数： |
15101 次 |
| 最近记录： |