Easiest way to get list of files in the server directory
Solution 1
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}');
Solution 2
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>
Solution 3
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 :)
Jan Chalupa
Updated on August 08, 2022Comments
-
Jan Chalupa almost 2 years
I need to get array of all images (or simply of all files) in directory (e.g. www.example.com/images/). I prefer to use JavaScript but it's hard to make. So should I use PHP, meybe?
Could you please help me - I'm not good at this.
Thank you very much!
-
mariobgr almost 9 yearsWell, yes, but node.js seems to be an overkill is this case. Did you try my suggestion?
-
Jan Chalupa almost 9 yearsThank you very much. I tried this but now I detect error which cause it doesn't work. When I use echo in give text "Array", I guess it's fine. Now I just need to loop throught this array to get file names - am I right?
-
Jan Chalupa almost 9 yearsThis doesn't work.
$images = glob('http://www.honzachalupa.cz/dev/imgs/*.{jpg,png}'); foreach($images as $image) { print $image; }
-
mariobgr almost 9 yearsDon't use the domain, but the path to the images directory. For example
/home/example.com/public_html/images
-
Jan Chalupa almost 9 yearsEven if I use relative path and change print to echo it won't work.
<?php $images = glob('/imgs/*.{jpg,png}'); foreach($images as $image) { echo $value; } ?>
-
mariobgr almost 9 yearsI doubt that's the path to your images. Put
echo getcwd();
in your script to see the actual directory you are in. -
Jan Chalupa almost 9 years
echo getcwd();
gives meD:\v000000\honzachalupa.cz\WWWRoot\dev
Directory of my images is e.g.www.honzachalupa.cz/dev/imgs/bg-1.jpg
, bg-2.jpg etc. -
mariobgr almost 9 yearsso you should execute
glob(D:\v018912\honzachalupa.cz\WWWRoot\dev\imgs\*.{jpg,png}'');
-
Jan Chalupa almost 9 yearsIt won't help. I'm probably cursed... :)
-
Jan Chalupa almost 9 yearsI removed the extension ´{jpg,png}´ and in works. :)
-
A Child of God about 6 yearsCan this search for files recursively through multiple folders?
-
Amir over 5 yearsI created a website project with VS and try your solution but unfortunately, nothing appears. do I need to setup anything?
-
Sid Holland over 5 years@Amir Make sure you have directory listing enabled on the directory.
-
abalter over 5 years
-
Kristianne Nerona about 3 yearsUnfortunately this code does not work on Firefox and Chrome due to a CORS policy