从本地文件夹中获取所有图像答案

【问题标题】：Get all images from local folder从本地文件夹中获取所有图像
【发布时间】：2015-08-30 13:50:50
【问题描述】：

我需要一种从本地文件夹中获取所有图像的方法，以便在本地运行的演示文稿。服务器不会尝试从本地文件夹中获取图像，因为这是不可能的/这种情况。

我需要使用 .js，因为我不能使用 .php（这会更容易），因为它在本地 PC 上运行。

假设我需要从 learn/
获取所有图像

我尝试了各种解决方案，可以在 here、here 和 here 找到，但都没有奏效。

【问题讨论】：

你需要一个 <input type="file" multiple> 和一些 JavaScript。
了解src 属性
@Ja͢ck 输入类型允许我手动从文件夹加载图像。这将是一个开始，但我需要 JavaScript 来遍历文件夹并获取所有图像。
您唯一能做的就是提示用户选择图像。浏览器中的JS不能直接访问本地文件系统。
@Alin 您需要用户实际输入一个目录并选择其中的所有文件；文件对象仅在用户交互时实例化。

标签： javascript jquery ajax

【解决方案1】：

我认为您最好的选择是在 Javascript 中使用新的 File API。 Is有很多从文件系统中读取文件的功能。

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

（来自here的代码）

你可以找到一个很好的解释和有用的代码here。

【讨论】：

这对我有帮助，我只是在帖子中发布了修改后的代码:) 谢谢。
@Alin：非常好。如果您愿意，请将您正在使用的代码发布在单独的答案中。不要在问题中发布“答案”代码。

【解决方案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);

});

【讨论】：