最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

css - Javascript read files in folder - Stack Overflow

programmeradmin0浏览0评论

I have the following problem which I'm trying to solve with javascript. I have a div with a background image specified in a css file, and I want my javascript to change that image periodically (let`s say every 5 secs).

I know how to do that, the problem is that I have a folder of images to choose from for the back image. I need to be able to read the filenames (from the image folder) into an array, change the background image of the div, delay for 5 seconds and change again.

I have the following problem which I'm trying to solve with javascript. I have a div with a background image specified in a css file, and I want my javascript to change that image periodically (let`s say every 5 secs).

I know how to do that, the problem is that I have a folder of images to choose from for the back image. I need to be able to read the filenames (from the image folder) into an array, change the background image of the div, delay for 5 seconds and change again.

Share Improve this question edited Apr 11, 2011 at 19:53 alexyorke 4,2993 gold badges36 silver badges56 bronze badges asked Jun 22, 2009 at 14:37 blackbirdblackbird 1,1371 gold badge23 silver badges48 bronze badges 2
  • Show us what the css rule that currently sets the rule looks like, and how the files are named. – Nosredna Commented Jun 22, 2009 at 14:39
  • div #home{ background: url(front/home.jpg); ...} the folder front contains some pics for display, and with javascript the idea was to do: document.getElementById('home').style.background='url(front/NAMEOFFILE')'; – blackbird Commented Jun 22, 2009 at 14:48
Add a comment  | 

8 Answers 8

Reset to default 4

in your javascript, use an array like

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);

The values in the array should be generated by your php

You're still going to need php or asp to query the folder for files. Javascript will not be able to "remotely" inspect the file system.

You can do something like the following in jQuery:

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

And in your getFolderAsArrayOfNames.php, something like this:

echo "function "
     .$_GET['callback']
     ."() {return "
     .json_encode(scandir('somepath/*.jpg'))
     ."}";
  • If you are using Apache as your web server, and
  • if you can configure it to provide a default directory listing for your images folder (use the appropriate options in httpd.conf and/or .htaccess), and
  • if you don't care that the list of images is available to everyone who visits your web site,

then you don't need PHP or any other server-side processing.

You can use XMLHttpRequest (or the jQuery ajax function, which is a nice wrapper) to get the listing for the folder. The response will be HTML and it will look something like this:

<!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> 

Since this output is pretty predictable, you might try parsing out the filenames using a JavaScript regular expression, but it's probably just as easy and more robust to create a hidden DIV on your page, put the HTML response into that DIV, and then use DOM methods to find <a href>s that are after <img> tags with an alt="[IMG]" attribute. Once again, using jQuery Selectors or similar helper methods available in other toolkits will make this DOM parsing pretty easy.

Once you have the URL of the new image (parsed from the href), you can set the new CSS background for your div with the .style.backgroundImage property.

You cannot do any file IO using JavaScript mainly because of security reason, so anyway you have to create some back end service which will update you with an list of available files in your folder. You don't have to do it in a hard way, you can use AJAX to it smoothly and nicely

You can't read a folder's contents, neither on the server nor on the clientside.

What you can do is to read the folder's contents with the help of a serverside script, and load it to a JavaScript array while processing the page.

This would not be ideal but in the absence of server-side processing (which you really should be doing--either PHP or Rails or Perl or whatever your host supports), you could allow directory listing on your images folder. This has security implications.

Then loading e.g., http://mysite.com/rotatingImages should respond with a list of files. You could do this with AJAX, parse out the relevant hrefs, push them onto an array and render your rotating images in JS.

You must send the list of names along with the JavaScript and then iterate through it.

A noted above, you can not access server's system from a client's browser (which is where JavaScript runs).

You have 3 possible solutions:

  1. Create the JavaScript file via some dynamic back-end (php or perl scripts are best for that). The main JavaScript function could still be static but the initialization of the array used by it (either as a snippet on the main HTML page or a separate .js imported file) would be a php/perl generated URL. A recent StackOverflow discussion of the topic is at link text

  2. Make an XMLHttpRequest (AJAX) call from your JavaScript to a separate service (basically a URL backed by - again - php/perl backend script) returning XML/JSON/your_data_format_of_choice list of files. This is probably a better solution if you expect/want/need to refresh a frequently-changing list of images, whereas a pre-built list of files in solution #1 is better suited when you don't care about list of files changing while the web page is loaded into the browser.

  3. An un-orthodox solution - if browsers you care about support animated background images (gif/png), just compile your set of images, especially if they are small sized, into an animated gif/png and use that as background.

发布评论

评论列表(0)

  1. 暂无评论