從本地文件夾獲取所有圖像

Question

我需要一種方法來獲取本地文件夾中的所有圖像，以便在本地運行。 將不會嘗試服務器從本地文件夾中獲取圖像，因為這是不可能的/情況。

我需要使用.js，因為我不能使用.php（這會更容易）因為它在本地PC上運行。

說我需要從學習中獲取所有圖像/

我已經嘗試了各種解決方案，可以在這里找到， 這里和這里但沒有工作。

Answer 1

我認為您最好的選擇是在Javascript中使用新的File API。 從文件系統中讀取文件有很多功能。

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

（來自這里的代碼）

你可以在這里找到一個很好的解釋和有用的代碼。

Answer 2

感謝Patrick Hofman的回答，我修改了代碼並最終得到了這個：

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

});