How do I Read folder images and display inside html?

Question

I would like display some images inside html page(offLine) using JS. I have a folder with an index.html and a folder called "images" with JPG inside. If I have 10 images, display 10, if I have 3 display 3 inside html Is it possible do this? I tried lots of tutorials but unsuccessfully. Regards, Fernando.

Can you use php or any server side script to get the images names and loop through it to print a tag with the src attribute set to it? Or is it only javascript? Only with javascript it is not as easy — mikepa88, Oct 28 '16 at 13:19
well, I use xampp to have a local server in my computer, which allows you to do that. I don't know if you can install it, if it's a personal project or a thing that will have to work in other computers... — mikepa88, Oct 28 '16 at 13:52
hm, well i don't know about installing servers in tablets, can't help you there. — mikepa88, Oct 28 '16 at 14:02
I have a android tablet with a offline browser in full screen displaying some images - scroll UP and DOWN. I do a simple HTML with images and its works fine, but soon I have 40 tables with different number of images and quantities. My idea is do some smart html to check a number os images and display this :( — FeAlmeida76, Oct 28 '16 at 14:05

score 4 · Answer 1 · answered Oct 28 '16 at 13:25

4

I think you can't browse read file from js on your computer. However you can browse file using FileReader API of HTML5.

answered Oct 28 '16 at 13:25

Hemant Manwani

128
8

If he is asking about loading images from local computer to a public website, It can't be done without the users manual input. – mattdevio Oct 28 '16 at 13:27
That should not be possible with js. It is actually inclined towards server side. – Hemant Manwani Oct 28 '16 at 13:30

score 2 · Answer 2 · answered Oct 28 '16 at 13:39

2

It's not possible to list directory contents by opening a local page in the browser. However if these files were named following a predictable pattern then you could try to display them by "guessing" the file names.

For example assuming images are named 1.jpg, 2.jpg etc. The script will try to append images 1...N as long as N.jpg exists and will terminate upon the first file name that fails to load.

var index = 1;
var tempImg = new Image();
tempImg.onload = function(){
   appendImage();
}
var tryLoadImage = function( index ){
   tempImg.src = 'images/' + index + '.jpg';
}
var appendImage = function(){
   var img = document.createElement('img');
   img.src = tempImg.src;
   document.body.appendChild( img )
   tryLoadImage( index++ )
}
tryLoadImage( index );

answered Oct 28 '16 at 13:39

pawel

35,827
7
56
53

Where I insert this code inside HTML with – FeAlmeida76 Oct 28 '16 at 14:35
@FernandoLuizdeAlmeida yes, exactly, place it in your html page within a – pawel Oct 28 '16 at 14:43
Thanks a lot pawel!! It works for me Regards, Fernando. – FeAlmeida76 Oct 28 '16 at 15:08
Then you lad I could help. You may mark this answer as accepted so other users facing similar problem can find it in the future ;) – pawel Oct 28 '16 at 19:30
Hi pawel, I don't know why but the image 1.jpg is duplicated Do you have any idea? – FeAlmeida76 Oct 29 '16 at 13:04

score 1 · Answer 3 · answered Oct 28 '16 at 13:24

1

You can load images with javascript, it will depending on how you name the files.

 // create image
 var img = new Image();

 // add src attribute                                   
 img.src = "images/" + filename;

 // when image is loaded, add it to my div
 img.addEventListener("load", function(){
     document.getElementById("mydiv").appendChild(this);
 });

answered Oct 28 '16 at 13:24

mattdevio

2,319
1
14
28

2

I tried to use this script but nothing happens. How do I use this? Is it necessary use another script? regards – FeAlmeida76 Oct 30 '16 at 19:31

score 1 · Answer 4 · edited May 23 '17 at 10:27

1

You can achieve this using ajax like in this jQuery example:

var dir = "Src/themes/base/images/";
var fileextension = ".png";
$.ajax({
    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
    url: dir,
    success: function (data) {
        //List all .png file names in the page
        $(data).find("a:contains(" + fileextension + ")").each(function () {
            var filename = this.href.replace(window.location.host, "").replace("http://", "");
            $("body").append("<img src='" + dir + filename + "'>");
        });
    }
});

taken from: How to load all the images from one of my folder into my web page, using Jquery/Javascript

edited May 23 '17 at 10:27

Community

1
1

answered Oct 28 '16 at 13:27

Tom M

2,815
2
20
47

I think linking to that answer in a comment would be better than pasting it here. – pawel Oct 28 '16 at 13:43
Where I insert this code inside HTML with – FeAlmeida76 Oct 28 '16 at 14:37
I would recommend pasting it into a seperate file, like app.js and loading it before your closing body tag. Like so: – Tom M Oct 28 '16 at 14:39

How do I Read folder images and display inside html?

4 Answers4