Easiest way to get list of files in the server directory

I disagree with @mariobgr. If there is no server setting preventing a directory listing, then the html generated by requesting that directory can be parsed for the contents.

$ tree maindir
maindir
├── index.html
└── somedir
    ├── doc1
    ├── doc2
    └── doc3

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"><!--  JQUERY  -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
  <title></title>
</head>
<body>
  <h1>Listing /somedir</h1><!-- Custom Script (defered load, after dom ready) -->
  <script>
    $.getJSON('./somedir', data => {
        console.log(data); //["doc1.jpg", "doc2.jpg", "doc3.jpg"] 
    });
  </script>
</body>


I managed to do it in base javascript using a modifyed ajax command to get the folder list as an html file. Then I grep the file names from inside of it:

function loadDoc() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    
                    // gets the entire html file of the folder 'logpost' in this case and labels it thing
                    thing = this.responseText
                    searchFor = /.html</g
                    a=0;
                    b=0;
                    var str = "";
            
                    // greps file for .html and then backs up leter by letter till you hot the file name and all
                    while ((dothtmls = searchFor.exec(thing)) != null ){

                        str = "";
                        console.log(dothtmls.index);
                        
                        a = dothtmls.index;

                        while (thing[a]  != '>' ){
                            a--;
                        }
                        a++;
                        while(thing[a] != '<'){
                            str = str + thing[a];
                            a++;
                        }
                        console.log(str);
                    } 
                }
            };
            xhttp.open("GET", "logpost/", true);
            xhttp.send();
            }

This is probably not the cleanist way but if you are working on a static web sever it should work :)


Javascript cannot fetch all files on a server, as it is a client-side langugage.

http://php.net/manual/en/function.glob.php is what you need.

$all = glob('/path/to/dir/*.*');

$images = glob('/path/to/dir/*.{jpg,png,gif}');