代码之家 › 专栏 › 技术社区 › blackbird

Javascript读取文件夹中的文件

css javascript

blackbird · 技术社区 · 15 年前

我有以下问题,我正试图用javascript解决。我有一个在css文件中指定了背景图像的div,我希望我的javascript定期(比如说每5秒)更改该图像。

我知道如何做到这一点,问题是我有一个文件夹的图像选择从为后面的图像。我需要能够读取文件名(从图像文件夹)到数组中,更改div的背景图像,延迟5秒,然后再次更改。

8 回复 | 直到 13 年前

Jonathan Fingland 15 年前

var images = [ "image1.jpg", "image2.jpg", "image3.jpg" ];

function changeImage() {
    var image = document.getElementById("yourimage");
    image.src=$images[changeImage.imageNumber];
    changeImage.imageNumber = ++changeImage.imageNumber % images.length;

}
changeImage.imageNumber=0;

setInterval(changeImage,5000);

数组中的值应该由php生成

cgp 15 年前

您可以在jQuery中执行以下操作:

$.ajax({
  url: 'getFolderAsArrayOfNames.php',
  dataType: 'json',
  success: function(data) {
    for(var i=0;i<data.length;i++) {
      // do what you need to do
    }
  });
});

echo "function "
     .$_GET['callback']
     ."() {return "
     .json_encode(scandir('somepath/*.jpg'))
     ."}";

system PAUSE 15 年前

如果您正在使用 阿帕奇
列出您的图像文件夹(使用 httpd.conf 和/或 .htaccess ),及
如果你不在乎的话图像可供任何人使用访问您的网站,

您不需要PHP

你可以用 XMLHttpRequest ajax 函数,这是一个很好的包装器)来获取文件夹的列表。响应将是HTML,它将如下所示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 
<html> 
 <head> 
  <title>Index of /demo1/images</title> 
 </head> 
 <body> 
<h1>Index of /demo1/images</h1> 
<pre><img src="/icons/blank.gif" alt="Icon "> <a href="?C=N;O=D">Name</a>                    <a href="?C=M;O=A">Last modified</a>      <a href="?C=S;O=A">Size</a>  <a href="?C=D;O=A">Description</a><hr><img src="/icons/back.gif" alt="[DIR]"> <a href="/demo1">Parent Directory</a>                             -   
<img src="/icons/image2.gif" alt="[IMG]"> <a href="tree.gif">tree.gif</a>                17-Mar-2009 12:58  6.2K  
<img src="/icons/image2.gif" alt="[IMG]"> <a href="house.gif">house.gif</a>               17-Mar-2009 12:58  6.5K  
<img src="/icons/image2.gif" alt="[IMG]"> <a href="car.gif">car.gif</a>                 02-Mar-2009 15:37  8.4K  
<img src="/icons/image2.gif" alt="[IMG]"> <a href="elephant.jpg">elephant.jpg</a>            02-Mar-2009 15:37  3.4K  
<hr></pre> 
<address>Apache/2.0.63 (Unix) Server at zeppo Port 80</address> 
</body></html>

由于此输出是可预测的,您可以尝试使用 JavaScript regular expression ,但在页面上创建一个隐藏的DIV,将HTML响应放入该DIV,然后使用DOM方法查找 <a href> <img> 带有 alt="[IMG]" 属性再次,使用 jQuery Selectors 或者其他工具包中提供的类似助手方法将使DOM解析变得非常简单。

href ),您可以使用 .style.backgroundImage 所有物

Artem Barger 15 年前

Aaron Digulla 15 年前

您可以在服务器端脚本的帮助下读取文件夹的内容,并在处理页面时将其加载到JavaScript数组中。

steamer25 15 年前

然后加载,例如。, http://mysite.com/rotatingImages 应以文件列表进行响应。您可以使用AJAX实现这一点,解析出相关的HREF,将它们推送到数组中,并在JS中呈现旋转图像。

Aaron Digulla 15 年前

Community Egal 7 年前

如上所述,您不能从客户端的浏览器(运行JavaScript的地方)访问服务器的系统。

您有3种可能的解决方案:

通过一些动态后端创建JavaScript文件(php或perl脚本最适合这样做)。最近对该主题的讨论载于 link text
从JavaScript调用XMLHttpRequest(AJAX)到一个单独的服务(基本上是一个由php/perl后端脚本支持的URL),返回XML/JSON/您的\u数据\u格式\u文件选择列表。如果您希望/希望/需要刷新频繁更改的图像列表,这可能是一个更好的解决方案,而当您不关心网页加载到浏览器时文件列表的更改时,解决方案#1中的预构建文件列表更适合。
一个非正统的解决方案-如果您关心的浏览器支持动画背景图像(gif/png),只需将您的图像集(尤其是小尺寸的图像)编译成动画gif/png,并将其用作背景。