CODEWITHSUNDEEP
javascriptcss
blackbird
blackbird

Reputation: 1137

Javascript read files in folder

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.

Upvotes: 2

Views: 23626

Answers (8)

system PAUSE
system PAUSE

Reputation: 38550

  • 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.

Upvotes: 3

DVK
DVK

Reputation: 129481

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.

Upvotes: 0

Jonathan Fingland
Jonathan Fingland

Reputation: 57177

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

Upvotes: 4

cgp
cgp

Reputation: 41381

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'))
     ."}";

Upvotes: 3

steamer25
steamer25

Reputation: 9553

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.

Upvotes: 1

Aaron Digulla
Aaron Digulla

Reputation: 328724

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

Upvotes: 0

TFM
TFM

Reputation: 544

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.

Upvotes: 1

Artem Barger
Artem Barger

Reputation: 41232

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

Upvotes: 1

Related Questions