Accessing Local Files with jQuery

Question

I believe that this question has been asked in a few different forms, but I've read quite a few different responses.

At first, I had a web-application written with mostly jQuery that would make use of servlets to retrieve information from various locations JavaScript could not access (ie. Feeds, images from a server, etc.). Now, however, I've been told to do away with the servlets and application configuration classes so that this project of mine contains only HTML, CSS, and JavaScript/jQuery. Rather than pulling the images off of the server, I need to retrieve them from a local file on the computer. I know that allowing this might seem like terrible design, but it's what I've been asked to do. At any rate, what I really need to do is count the number of image files in a directory and then perhaps compile an array of the filenames themselves. I could do this fine in Java when using the servlets, but without them, I'm not sure how or even if this can be done.

I'm basically trying to use the jQuery Cycle plug-in to cycle through these images like a slideshow. I inject (or $("#div").append()) these images into the div by using a loop based on the number of images present.

So, is there a way I can do this with using JavaScript, HTML, jQuery plug-in, etc? I'd like to avoid using PHP and Java at this point...

• Pointy: You can't access the local file system in the way you describe from just JavaScript in a browser. With HTML5 file APIs you have some access to file contents, but not things like directory listings.
• Kris Schouw: Hmmm... That's what I was afraid of. I think I've seen a jQuery plug-in that gives you access to a file tree of some kind, but the one I've seen seems to merely allow the user to physically explore their directories themselves with a UI... I'm not sure if the code itself can access the actual files themselves, though.
• 000: If my employer did not ask or respect my feedback into a project, they would quickly become a former employer.

Answer 1

You can't just read a directory with JavaScript; however, there appears to be a way to "exploit" how browsers function using http://www.irt.org/articles/js014/. It may not be pretty, but the demo works in the latest Chrome and IE7-9 for me. I'm sure some of the techniques could be updated to use cleaner code if you'd like to improve upon it.

EDIT: Another technique you could use can be found in Javascript read files in folder

It definitely looks to be a cleaner solution. What I'd recommend is extracting the body contents to inject into a hidden div or using the path for an iframe that you can read from.

• Pointy: That "irt.org" example is for reading files that exist on the server, not on the client.
• Kris Schouw: That second method seems like it would work. So by calling AJAX GET on the directory folder with the images, standard HTML is returned that can be parsed to find the image filenames that I want? Seems pretty simple, more or less. Thanks.
• Akkuma: I suppose the use of local files wasn't completely clear. I thought he meant from the local server.