How do I count files in a directory using jQuery?

Question

I'd like to count the number of files in a folder and return that number to set a variable in a .js file.

Essentially, I have X number of images in a folder. When the user clicks the right arrow, I replace the existing set of 8 images with the next set of 8 images, and so on and so forth. I currently manually enter the variable (38 right now) into the page, since there are 38 thumbnails in the folder.

The code works perfectly, but I hate the idea of changing a number each time I add a file. I'd like to have it set the variable to the exact number of images in the folder.

Is this possible using JavaScript or jQuery? Do I need to write a PHP file to do return this variable for me? Any information would be great!

possible duplicate of [Accessing Local Files with jQuery](http://stackoverflow.com/questions/6917910/accessing-local-files-with-jquery) — Tats_innit, Jul 15 '12 at 05:50
Better to script server-side information (list of images in a folder) with a server-side language (php). Clients have no business getting direct access to the file system on a server. — Sam Dufel, Jul 15 '12 at 05:51
This looks related to your question: http://stackoverflow.com/questions/1266004/count-number-of-files-in-a-folder-through-javascript — avue, Jul 15 '12 at 05:51

score 8 · Accepted Answer · answered Jul 15 '12 at 05:53

8

This is the kind of task PHP is better suited for, keep your Javascript to the client-side. Write a very simple PHP script that counts the files in a folder

echo iterator_count(new DirectoryIterator('/home/path/dir'));

And call it from your JQuery script.

$.get('numberoffiles.php', function(data) {
  alert(data);
});

answered Jul 15 '12 at 05:53

Mendhak

8,194
5
47
64

this returns [number_of_files + 2] because [./] and [../] are counted too – Marco Sanchez Jul 08 '18 at 23:58

score 3 · Answer 2 · answered Jul 15 '12 at 06:27

3

If you must use client side and the files are numbered, preload the file and set the number when you get an error

...
Img = new Image();
Img.onerror=function() {
  maxImages=cnt-1;
}
Img.src = "image_"+cnt+".jpg";

answered Jul 15 '12 at 06:27

mplungjan

169,008
28
173
236

1

Just wanted to say, I appreciate the client-side solution with JavaScript even though it seems like PHP is the way to go... so, thanks! It's great to have both sides of the spectrum. – bdrelling Jul 17 '12 at 00:57

score 2 · Answer 3 · edited Nov 27 '15 at 18:16

Simple way:

<?php
    $dir = "images";
    $file_count = count(glob("{$dir}/*.*"));
?>
<html>
<head>
<title>Welcome</title>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 

    var dir = <?php echo $dir ?>;
    var file_count = <?php echo $file_count ?>;

    $('#msg').html('File count in folder ' + dir + ' is ' + file_count);
});
</script>
<body>
<div id="msg"></div>
</body>
</html>

score 0 · Answer 4 · answered Jul 15 '12 at 06:12

0

I would do it like this

echo count(glob("{$_GET['dir']}/*.*"));

answered Jul 15 '12 at 06:12

Adam Fowler

1,750
1
17
18

I feel that you should at least mention that this is insecure, and that you should make sure that the `dir` variable should be sanitized before being used. – Mark Tomlin Jul 15 '12 at 06:18
Yes but I assumed that was a given. Of course the user should change this code to match his/her needs. – Adam Fowler Jul 15 '12 at 06:20

How do I count files in a directory using jQuery?

4 Answers4

Linked