Get all images from local folder

Question

I need a way to get all the images from a local folder for a presentation that will also run locally. There will be no attempt for a server to take the images from a local folder since that is not possible/the case.

I need to use .js since I can't use .php (which would be easier) since it runs on a local PC.

Say I need to take all the images from learn/

I have tried various solutions that can be found here, here and here but none worked.

Answer 1

Thanks to Patrick Hofman's answer, I modified the code and ended up with this :

$(document).ready(function(){  

  function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files; 

    if (files) {
        for (var i=0, f; f=files[i]; i++) {
              var r = new FileReader();
            r.onload = (function(f) {
                return function(e) {
                    var contents = e.target.result;
                    $('body').append('<h1>' + f.name + '</h1><img src="learn/' + f.name + '"/>');
                };
            })(f);

            r.readAsText(f);
        }   
    } else {
          alert("Failed to load files"); 
    }
  }

  document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);

});

Answer 2

I think your best option is to use the new File API in Javascript. Is has a lot of functions to read files from the file system.

<input type="file" id="fileinput" multiple />
<script type="text/javascript">
  function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files; 

    if (files) {
        for (var i=0, f; f=files[i]; i++) {
              var r = new FileReader();
            r.onload = (function(f) {
                return function(e) {
                    var contents = e.target.result;
                    alert( "Got the file.n" 
                          +"name: " + f.name + "n"
                          +"type: " + f.type + "n"
                          +"size: " + f.size + " bytesn"
                          + "starts with: " + contents.substr(1, contents.indexOf("n"))
                    ); 
                };
            })(f);

            r.readAsText(f);
        }   
    } else {
          alert("Failed to load files"); 
    }
  }

  document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);
</script>

(code from here)

You can find a good explanation and helpful code here.