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

时间:2015-06-15 06:47:51

标签: javascript jquery ajax

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

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

  

说我需要从学习/

中获取所有图像

我尝试了各种解决方案hereherehere,但都没有效果。

2 个答案:

答案 0 :(得分:12)

我认为您最好的选择是在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>

(来自here的代码)

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

答案 1 :(得分:3)

感谢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);

});