How to generate HTML href code with directory files

Question

I need to generate a static HTML href code which is in loop, except the source of the image. The images are stored in one folder. Is there a way with javascript how to generate the whole directory and to put the filenames into the src="/pictures/%filename%.jpg"? There are a lot of pictures and I don't want to link every single photo by hand. It would cost a lot of time. Thanks!

Javascript is clientside (normally). Because of security reasons you cannot do this directly using javascript. You need server side logic to retrieve the file locations as a list. Then you can send this list to the client to do with it whatever you want. — Mark Baijens, Dec 17 '18 at 15:49
are you using any server-side markup generated tools, like ASP.NET MVC? — VadimB, Dec 17 '18 at 15:50
technically it is possible if directory listing is enabled, but that is a really bad idea, as the comments above say, use server side scripting (node, PHP, ASP, etc) to generate the html — DarkMukke, Dec 17 '18 at 15:59
Ok sorry for my bad explanation. I don't want for the clientside to finish this loop. I want to produce a local app to generate the src="/pathtopicutres" with the directory pictures and to paste it the pictures.html file — Zaim, Dec 17 '18 at 16:25
Possible duplicate of [Get list of filenames in folder with Javascript](https://stackoverflow.com/questions/31274329/get-list-of-filenames-in-folder-with-javascript) — Daniel Beck, Dec 17 '18 at 16:36
This post only list the files. I need a loop with an static html source code which only the source of the images is changing — Zaim, Dec 17 '18 at 16:43

score 1 · Answer 1 · answered Dec 17 '18 at 15:56

1

JavaScript can't access server files. You can use PHP scandir() to get an array of all files within the specified directory. Then do

foreach ($arr as $file){
    echo "<img src='/path/to/file/" . $file . "'>";
}

answered Dec 17 '18 at 15:56

Mike

184
9

Thats a useful answer. Can I put my whole HTML code in there and put the . $file . into the img src=""? Will this code produce the html source code for all files in the directory? – Zaim Dec 17 '18 at 16:30

score -1 · Accepted Answer · answered Dec 17 '18 at 20:07

So I've uploaded this php file on the server:

<?php
$dir    = 'best-off';
$files1 = scandir($dir);

foreach ($files1 as $file){
    echo "
    <div>
      <span class='img-thumbnail d-block cur-pointer'>
        <img alt='' src='img/best-off/thumbs/" . $file . "' class='img-fluid'>
      </span>
    </div>";
}
?>

then I looked into the source code in the browser and copied the code into the initially HTML file. Worked like a charm. Thanks!

How to generate HTML href code with directory files

2 Answers2