Find all images in folder with Javascript

Sorry If this is trivial,

Edit: in short I found out this really isn’t intended to be done with client-side JavaScript.

  • Read bytes from a binary file with JavaScript, without jQuery
  • How can I iterate through files in Javascript
  • How to use HTML5 File API with Unobtrusive JavaScript?
  • Create binary blob in JS
  • Saving file on IE11 with FileSaver
  • Upload a CSV file and read it in Bokeh Web app
  • I am wondering if i know a folder has pictures. /home/project1/pictures
    and they follow some naming convention face102039.jpg face1030303.jpg …

    Is there a was to know every picture thats in there starting with face but not knowing what numbers are after it? Like is there a way i could possibly grab all the file names with a .jpg or .png extension and then i would know how to parse their strings. I am just not sure how to get all the files in a directory with javascript.

    I saw this similar post, and I know how to do what I want in Java, but i couldnt find a way to do this in javascript. I was thinking about doing it server side with java or ruby but I am pretty sure i should be able to do this clientside via javascript. Maybe I am wrong though.

  • How to read file asynchronously using javascript for fileupload
  • How to read a file line using php in a javascript variable without the breakline character?
  • load graph data from files on button click with bokeh
  • How do I submit a “file” input without submit button with JavaScript?
  • How to use Javascript to read local text file and read line by line?
  • Why “HTML <input type='file' />” has “files” property in JavaScript?
  • 3 Solutions collect form web for “Find all images in folder with Javascript”

    Given the constraints it is technically possible to do this, just not very practical. I would not recommend using this since you could lock up the user’s browser pretty quickly.

    var len = 2000000;//How long you want to wait.
    var pics=[];
    for(var i=0;i<len;i++){
      a=new Image();
      a.onload=function(){
        pics.push(this);
      }
      a.src='/home/project1/pictures/face'+i+'.jpg';
    }
    

    The real answer is you need to implement a back end in PHP, RoR, etc. To send you a list of the files in the picture folder. This can be done with AJAX.

    Javascript is running at the client side. For example in the browser of the visitor. It has no direct access to the server and image folders, as Java and php does.

    What can be done is using ajax in the javascript, to fetch a java/php file which lists the directory content.

    You can’t access the file system with JavaScript. You could, however, use AJAX to query your server for that information and return it as a JSON string.

    Hope this helps.