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

Question

I have a folder named  images  in the same directory as my  js file  I want to load all the images from  images  folder into my html page using Jquery Javascript   Since  names of images are not some successive integers  how am I supposed to load these images

User · Answer

Here is one way to do it  Involves doing a little PHP as well   The PHP part    filenameArray         handle   opendir dirname realpath   FILE       images             while  file   readdir  handle                if  file          amp  amp   file                            array push  filenameArray   images  file                             echo json encode  filenameArray     The jQuery part     ajax               url   getImages php               dataType   json               success  function  data                       each data  function i filename                            imageDiv   prepend   lt img src     filename     gt  lt br gt                                                     So basically you do a PHP file to return you the list of image filenames as JSON  grab that JSON using an ajax call  and prepend append them to the html  You would probably want to filter the files u grab from the folder   Had some help on the php part from 1

User · Answer

You can t do this automatically  Your JS can t see the files in the same directory as it   Easiest is probably to give a list of those image names to your JavaScript   Otherwise  you might be able to fetch a directory listing from the web server using JS and parse it to get the list of images

User · Answer

Based on the answer of Roko C  Buljan  I have created this method which gets images from a folder and its subfolders   This might need some error handling but works fine for a simple folder structure   var findImages   function        var parentDir      Resource materials         var fileCrowler   function data           var titlestr     data  filter  title   text                Directory listing for  Resource materials xxx          var thisDirectory   titlestr slice titlestr indexOf       titlestr length             List all image file names in the page           data  find  a   attr  href   function  i  filename                if  filename match     jpe g png gif                          var fileNameWOExtension   filename slice 0  filename lastIndexOf                       var img html     lt img src   0   id   1   alt   2   width  75  height  75  hspace  2  vspace  2  onclick  onImageSelection this    gt   format thisDirectory   filename  fileNameWOExtension  fileNameWOExtension                       image pane   append img html                             else                     ajax                       url  thisDirectory   filename                      success  fileCrowler                                                           ajax           url  parentDir          success  fileCrowler

User · Answer

This is the code that works for me  what I want is to list the images directly on my page so that you just have to put the directory where you can find the images for example -  dir    images        I do a substring var pathName   filename substring  filename lastIndexOf         1       with which I make sure to just bring the name of the files listed and at the end I link my URL to publish it in the body      body    append       lt img src      dir   pathName     gt   lt   img gt         lt  DOCTYPE html gt   lt html lang  en  dir  ltr  gt     lt head gt       lt meta charset  utf-8  gt       lt title gt  lt  title gt       lt script src  jquery-1 6 3 min js  gt  lt  script gt           lt script gt            var dir    imagenes            var fileextension     jpg             ajax                 This will retrieve the contents of the folder if the folder is configured as  browsable              url  dir              success  function  data                      Lsit all png file names in the page                   data  find  a contains     fileextension        each function                          var filename   this href replace window location pathname      replace  http                       var pathName   filename substring filename lastIndexOf        1                                         body   append     lt img src     dir   pathName     gt  lt  img gt                  console log dir pathName                                                             lt  script gt      lt  head gt     lt body gt   lt img src  1 1 jpg  gt     lt  body gt   lt  html gt

User · Answer

If  as in my case  you would like to load the images from a local folder on your own machine  then there is a simple way to do it with a very short Windows batch file  This uses the ability to send the output of any command to a file using    to overwrite a file  and     to append to a file    Potentially  you could output a list of filenames to a plain text file like this   dir  B  gt  filenames txt   However  reading in a text file requires more faffing around  so I output a javascript file instead  which can then be loaded in your to create a global variable with all the filenames in it   echo var g FOLDER CONTENTS   mlString function          gt  folder contents js dir  B images  gt  gt  folder contents js echo        gt  gt  folder contents js   The reason for the weird function with comment inside notation is to get around the limitation on multi-line strings in Javascript  The output of the dir command cannot be formatted to write a correct string  so I found a workaround here   function mlString f        return f toString            replace                               replace                         Add this in your main code before the generated javascript file is run  and then you will have a global variable called g FOLDER CONTENTS  which is a string containing the output from the dir command  This can then be tokenized and you ll have a list of filenames  with which you can do what you like   var filenames   g FOLDER CONTENTS match   S  g     Here s an example of it all put together  image loader zip  In the example  run bat generates the Javascript file and opens index html  so you needn t open index html yourself   NOTE   bat is an executable type in Windows  so open them in a text editor before running if you are downloading from some random internet link like this one   If you are running Linux or OSX  you can probably do something similar to the batch file and produce a correctly formatted javascript string without any of the mlString faff

User · Answer

Works both localhost and on live server without issues  and allows you to extend the delimited list of allowed file-extensions      var folder    images       ajax       url   folder      success  function  data              data  find  a   attr  href   function  i  val                if  val match     jpe g png gif                             body   append    lt img src     folder   val     gt                                             NOTICE  Apache server has Option Indexes turned on by default - if you use another server like i e  Express for Node you could use this NPM package for the above to work  https   github com expressjs serve-index  If the files you want to get listed are in  images than inside your server js you could add something like   const express   require  express    const app   express    const path   require  path        Allow assets directory listings const serveIndex   require  serve-index     app use   images   serveIndex path join   dirname    images

User · Answer

document  ready function      var dir    test       folder location   var fileextension     jpg      image format   var i    1        function imageloop            lt img   gt    attr  src   dir   i   fileextension   appendTo   testing        if  i  13         alert  loaded              else        i          imageloop                          For this script  I have named my image files in a folder as 1 jpg  2 jpg  3 jpg      to 13 jpg   You can change directory and file names as you wish

User · Answer

In jQuery you can use Ajax to call a server-side script  The server-side script will find all the files in the folder and return them to your html file where you will need to process the returned information

User · Answer

Use     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   lt img src      dir   filename      gt                             If you have other extensions  you can make it an array and then go through that one by one using in array     P s   The above source code is not tested

User · Answer

Add the following script    lt script type  text javascript  gt   function mlString f        return f toString            replace                               replace                        function run onload         console log  Sample text for console        var filenames   g FOLDER CONTENTS match   S  g       var fragment   document createDocumentFragment        for  var i   0  i  lt  filenames length    i            var extension   filenames i  substring filenames i  length-3           if  extension     png     extension     jpg      var iDiv   document createElement  div    iDiv id    images   iDiv className    item   document getElementById  image div   appendChild iDiv   iDiv appendChild fragment                var image   document createElement  img                image className    fancybox               image src    images     filenames i               fragment appendChild image                        document getElementById  images   appendChild fragment        lt  script gt    then create a js file with the following   var g FOLDER CONTENTS   mlString function          1 png 2 png 3 png

User · Answer

Using Chrome  searching for the images files in links  as proposed previously  didn t work as it is generating something like         i18nTemplate process document  loadTimeData    lt  script gt   lt script gt start  current directory      lt  script gt   lt script gt addRow           1  170 B   10 2 15  8 32 45 PM    lt  script gt   lt script gt addRow  fotos-interessantes-11 jpg   fotos-interessantes- gt  11 jpg  false         lt  script gt    Maybe the most reliable way is to do something like this    x000D   x000D  var folder    img    x000D   x000D    ajax   x000D      url   folder  x000D      success  function  data    x000D          var patt1              jpe g png gif    gi         extract    jpeg  or    jpg  or    png  or    gif  x000D          var result   data match patt1   x000D          result   result map function el    return el replace    g                  remove double quotes     surrounding filename extension    TODO  do this at regex  x000D   x000D          var uniqueNames                                        this array will help to remove duplicate images x000D            each result  function i  el   x000D              var el url encoded   encodeURIComponent el         avoid images with same name but converted to URL encoded x000D              console log  under analysis      el   x000D              if   inArray el  uniqueNames      -1   amp  amp     inArray el url encoded  uniqueNames      -1   x000D                  console log  adding     el url encoded   x000D                  uniqueNames push el url encoded   x000D                      slider   append    lt img src      el url encoded     alt    gt              finaly add to HTML x000D                else    console log el url encoded     already in       x000D              x000D         x000D      error  function xhr  textStatus  err    x000D         alert  Error  here we go       x000D         alert textStatus   x000D         alert err   x000D         alert  readyState    xhr readyState   n xhrStatus    xhr status   x000D         alert  responseText    xhr responseText   x000D       x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

This is the way to add more file extentions  in the example given by Roy M J in the top of this page   var fileextension      png     jpg      data  find  a contains      fileextension 0         a contains      fileextension 1          each function         here comes the rest of the function made by Roy M J      In this example I have added more contains

User · Answer

You can use the fs readdir or fs readdirSync methods to get the file names in the directory   The difference between the two methods  is that the first one is asynchronous  so you have to provide a callback function that will be executed when the read process ends   The second is synchronous  it will returns the file name array  but it will stop any further execution of your code until the read process ends   After that you simply have to iterate through the names and using append function  add them to their appropriate locations  To check out how it works see HTML DOM and JS reference

User · Answer

If interested in doing this without jQuery - here s a pure JS variant  from here  of the answer currently most upvoted   var xhr   new XMLHttpRequest    xhr open  GET     img   true   xhr responseType    document   xhr onload        gt      if  xhr status     200        var elements   xhr response getElementsByTagName  a        for  x of elements          if   x href match     jpe g png gif                    let img   document createElement  img              img src   x href            document body appendChild img                          else       alert  Request failed  Returned status of     xhr status         xhr send

[javascript] How to load all the images from one of my folder into my web page, using Jquery/Javascript

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to image