Is there a way to return a list of all the image file names from a folder using only Javascript

Question

I want to display all images from folder located in server in image gallery   Is there a way to return a list of all the image file names from a folder using only JavaScript or JQuery   Also I want to count the number of image files in similar folder using only JavaScript   Is there any way to count the number of image files from a folder using only JavaScript

User · Answer

Although you can run FTP commands using WebSockets, the simpler solution is listing your files using opendir in server side (PHP), and "spitting" it into the HTML source-code, so it will be available to client side.

The following code will do just that,

Optionally -

use <a> tag to present a link.
query for more information using server side (PHP),

for example a file size,

_{PHP filesize TIP: also you can easily overcome the 2GB limit of PHP's filesize using: AJAX + HEAD request + .htaccess rule to allow Content-Length access from client-side.}

A Fully Working example can be found at my github repository: download.eladkarako.com
The following is a trimmed-down (simplified) example:

<?php
  /* taken from: https://github.com/eladkarako/download.eladkarako.com */

  $path = 'resources';
  $files = [];
  $handle = @opendir('./' . $path . '/');

  while ($file = @readdir($handle)) 
    ("." !== $file && ".." !== $file) && array_push($files, $file);
  @closedir($handle);
  sort($files); //uksort($files, "strnatcasecmp");

  $files = json_encode($files);

  unset($handle,$ext,$file,$path);
?>
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div data-container></div>
  <script>
    /* you will see (for example): 'var files = ["1.bat","1.exe","1.txt"];' if your folder containes those 1.bat 1.exe 1.txt files, it will be sorted too! :) */

    var files = <?php echo $files; ?>;

    files = files.map(function(file){
      return '<a data-ext="##EXT##" download="##FILE##" href="http://download.eladkarako.com/resources/##FILE##">##FILE##</a>'
        .replace(/##FILE##/g,       file)
        .replace(/##EXT##/g,        file.split('.').slice(-1) )
        ;
    }).join("\n<br/>\n");

    document.querySelector('[data-container]').innerHTML = files;
  </script>

</body>
</html>

DOM result will look like that:

<html lang="en-US" dir="ltr"><head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div data-container="">
    <a data-ext="bat" download="1.bat" href="http://download.eladkarako.com/resources/1.bat">1.bat</a>
    <br/>
    <a data-ext="exe" download="1.exe" href="http://download.eladkarako.com/resources/1.exe">1.exe</a>
    <br/>
    <a data-ext="txt" download="1.txt" href="http://download.eladkarako.com/resources/1.txt">1.txt</a>
    <br/>
  </div>
  <script>
    var files = ["1.bat","1.exe","1.txt"];

    files = files.map(function(file){
      return '<a data-ext="##EXT##" download="##FILE##" href="http://download.eladkarako.com/resources/##FILE##">##FILE##</a>'
        .replace(/##FILE##/g,       file)
        .replace(/##EXT##/g,        file.split('.').slice(-1) )
        ;
    }).join("\n<br/>\n");

    document.querySelector('[data-container').innerHTML = files;
  </script>


</body></html>

User · Answer

No  you can t do this using Javascript alone  Client-side Javascript cannot read the contents of a directory the way I think you re asking about   However  if you re able to add an index page to  or configure your web server to show an index page for  the images directory and you re serving the Javascript from the same server then you could make an AJAX call to fetch the index and then parse it   i e   1  Enable indexes in Apache for the relevant directory on yoursite com   http   www cyberciti biz faq enabling-apache-file-directory-indexing   2  Then fetch   parse it with jQuery  You ll have to work out how best to scrape the page and there s almost certainly a more efficient way of fetching the entire list  but an example     ajax     url   http   yoursite com images      success  function data          data  find  td  gt  a   each function               will loop through          alert  Found a file        this  attr  href

User · Answer

IMHO  Edizkan Adil Ata s idea is actually the most proper way  It extracts the URLs of anchor tags and puts them in a different tag  And if you don t want to let the anchors being seen by the page visitor then just  hide   them all with JQuery or display  none  in CSS    Also you can perform prefetching  like this     lt link rel  prefetch  href  imagefolder clouds jpg    gt    That way you don t have to hide it and still can extract the path to the image

User · Answer

No  JavaScript is a client-side technology and cannot do anything on the server  You could however use AJAX to call a server-side script  e g  PHP  which could return the information you need   If you want to use AJAX  the easiest way will be to utilise jQuery     post  someScript php   function data       console log data      data  contains whatever someScript php returned

User · Answer

Many tricks work  but the Ajax request split the file name at 19 characters  Look at the output of the ajax request to see that   The file name is okay to go into the href attribute  but the   this  attr  href   use the text of the  lt a href  full file name   gt   Split file name   lt  a gt   So the   data  find  a contains  jpg     is not able to detect the extension   I hope this is useful

User · Answer

This will list all jpg files in the folder you define under url  and append them to a div as a paragraph  Can do it with ul li as well     ajax     url   YOUR FOLDER     success  function data          data  find  a contains  jpg    each function               will loop through          var images     this  attr  href                 lt p gt  lt  p gt    html images  appendTo  a div of your choice

[javascript] Is there a way to return a list of all the image file names from a folder using only Javascript?

Examples related to javascript

Examples related to jquery