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

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

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  lt a gt  tag to present a link  query for more information using server side  PHP    for example a file size     PHP filesize TIP   nbsp  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     lt  php      taken from  https   github com eladkarako download eladkarako com        path    resources      files          handle    opendir         path            while   file    readdir  handle                  file  amp  amp            file   amp  amp  array push  files   file      closedir  handle     sort  files     uksort  files   strnatcasecmp        files   json encode  files      unset  handle  ext  file  path     gt   lt  DOCTYPE html gt   lt html lang  en-US  dir  ltr  gt   lt head gt     lt meta http-equiv  X-UA-Compatible  content  IE Edge  gt     lt meta name  viewport  content  width device-width  initial-scale 1  gt   lt  head gt   lt body gt     lt div data-container gt  lt  div gt     lt script gt         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    lt  php echo  files    gt        files   files map function file         return   lt a data-ext    EXT    download    FILE    href  http   download eladkarako com resources   FILE    gt   FILE   lt  a gt            replace    FILE   g        file           replace    EXT   g         file split      slice -1                     join   n lt br  gt  n         document querySelector   data-container    innerHTML   files     lt  script gt    lt  body gt   lt  html gt    DOM result will look like that    lt html lang  en-US  dir  ltr  gt  lt head gt     lt meta http-equiv  X-UA-Compatible  content  IE Edge  gt     lt meta name  viewport  content  width device-width  initial-scale 1  gt   lt  head gt   lt body gt     lt div data-container    gt       lt a data-ext  bat  download  1 bat  href  http   download eladkarako com resources 1 bat  gt 1 bat lt  a gt       lt br  gt       lt a data-ext  exe  download  1 exe  href  http   download eladkarako com resources 1 exe  gt 1 exe lt  a gt       lt br  gt       lt a data-ext  txt  download  1 txt  href  http   download eladkarako com resources 1 txt  gt 1 txt lt  a gt       lt br  gt     lt  div gt     lt script gt      var files     1 bat   1 exe   1 txt         files   files map function file         return   lt a data-ext    EXT    download    FILE    href  http   download eladkarako com resources   FILE    gt   FILE   lt  a gt            replace    FILE   g        file           replace    EXT   g         file split      slice -1                     join   n lt br  gt  n         document querySelector   data-container   innerHTML   files     lt  script gt     lt  body gt  lt  html gt

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

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

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

[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