Holen Sie alle Bilder aus dem lokalen Ordner

Question

Ich brauche eine Möglichkeit, alle Bilder aus einem lokalen Ordner für eine Präsentation, die auch lokal ausgeführt werden. Es wird nicht versucht, dass ein Server die Bilder aus einem lokalen Ordner aufnimmt, da dies nicht möglich ist.

Ich brauche .js, da ich .php nicht verwenden kann (was einfacher wäre), da es auf einem lokalen PC läuft.

sagen, dass ich alle Bilder nehmen müssen von / lernen

Ich habe verschiedene Lösungen versucht, die here gefunden werden kann, here und here aber keiner arbeitete.

Answer 1

Ich denke, Ihre beste Option ist es, die neue Datei-API in Javascript zu verwenden. Es hat viele Funktionen, um Dateien aus dem Dateisystem zu lesen.

<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 von here)

Sie eine gute Erklärung finden können und hilfreichen Code here.

Answer 2

Dank Patrick Hofman Antwort, modifizierte ich den Code und endete mit auf den Punkt:

$(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); 

});