Pobierz wszystkie obrazy z lokalnego folderu

Question

Potrzebuję sposobu, aby uzyskać wszystkie obrazy z lokalnego folderu dla prezentacji, która będzie również działać lokalnie. Serwer nie będzie próbował pobrać obrazów z lokalnego folderu, ponieważ nie jest to możliwe.

Potrzebuję użyć .js, ponieważ nie mogę używać .php (co byłoby łatwiejsze), ponieważ działa na lokalnym komputerze.

Powiedzieć muszę podjąć wszystkie obrazy z nauczyć/

Próbowałem różnych rozwiązań, które można znaleźć here, here i here ale nikt pracował.

Answer 1

Myślę, że najlepszym wyjściem jest użycie nowego API File w JavaScript. Ma wiele funkcji do odczytywania plików z systemu plików.

<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> 

(kod z here)

Można znaleźć dobre wyjaśnienie i pomocny kod here.

Answer 2

Dzięki odpowiedź Patricka Hofmana, I zmodyfikowany kod i skończyło się tak:

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

});