Question

我需要使用javascript从HTML内的目录中打印所有txt文件。我试图修改处理照片的代码，但我没有成功

How to load all the images from one of my folder into my web page, using Jquery/Javascript

var dir = "D:\Finaltests\test1\new\places";
var fileextension = ".txt";
$.ajax({
    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
    url: dir,
    success: function (data) {
        //List all .txt file names in the page
        $(data).find("a:contains(" + fileextension + ")").each(function () {
         var filename = this.href.replace(window.location.host, "").replace("http://", "");
        $("body").append("<input type='file' onload='readText(" + dir + ")>");


        });
    }
});

Answer 1

您可以<input type="file">使用multiple属性集，accept属性设置为text/plain; change事件; FileReader，for循环。

var pre = document.querySelector("pre");

document.querySelector("input[type=file]")
.addEventListener("change", function(event) {
  var files = event.target.files;
  for (var i = 0; i < files.length; i++) {
    (function(file) {
      var reader = new FileReader();
      reader.addEventListener("load", function(e) {
         pre.textContent += "\n" + e.target.result;
      });
      reader.readAsText(file)
    }(files[i]))
  }
})

<input type="file" accept="text/plain" multiple />
<pre>

</pre>

您还可以使用webkitdirectory和allowdirs属性在chrome，chromium上进行目录上传;在每晚45+或firefox 42+，dom.input.dirpicker首选项设置为true，see Firefox 42 for developers，Select & Drop Files and/or Folders to be parsed。请注意，您也可以从文件管理器中删除<input type="file">元素

中的文件夹

var pre = document.querySelector("pre");

document.querySelector("input[type=file]")
  .addEventListener("change", function(event) {
    console.log(event.target.files)
    var uploadFile = function(file, path) {
      // handle file uploading
      console.log(file, path);
      var reader = new FileReader();
      reader.addEventListener("load", function(e) {
        pre.textContent += "\n" + e.target.result;
      });
      reader.readAsText(file)
    };

    var iterateFilesAndDirs = function(filesAndDirs, path) {
      for (var i = 0; i < filesAndDirs.length; i++) {
        if (typeof filesAndDirs[i].getFilesAndDirectories === 'function') {
          var path = filesAndDirs[i].path;

          // this recursion enables deep traversal of directories
          filesAndDirs[i].getFilesAndDirectories()
          .then(function(subFilesAndDirs) {
            // iterate through files and directories in sub-directory
            iterateFilesAndDirs(subFilesAndDirs, path);
          });
        } else {
          uploadFile(filesAndDirs[i], path);
        }
      }
    };
    if ("getFilesAndDirectories" in event.target) {
      event.target.getFilesAndDirectories()
        .then(function(filesAndDirs) {
          iterateFilesAndDirs(filesAndDirs, '/');
        })
    } else {
      // do webkit stuff
      var files = event.target.files;
      for (var i = 0; i < files.length; i++) {
        (function(file) {
          uploadFile(file)
        }(files[i]))
      }
    }

  })

<!DOCTYPE html>
<html>

<head>
  <script></script>
</head>

<body>
  <input type="file" webkitdirectory allowdirs directory />
  <pre>

</pre>
</body>

</html>

plnkr http://plnkr.co/edit/Y1XYd9rLOdKRHw6tb1Sh?p=preview

对于chrome ajax协议本地文件系统的file:请求，您可以在设置--allow-file-access-from-files标志的情况下启动，请参阅Jquery load() only working in firefox?。

在Firefox上，您可以将security.fileuri.strict_origin_policy设置为false，请参阅Security.fileuri.strict origin policy。

对于chrome，chrome的可能$.ajax()方法，您可以尝试

var path = "/path/to/drectory"; // `D:\`, `file:///`
var files = [];
$.ajax({url:path, dataType:"text html"})
.then((data) => {
  // match file names from `html` returned by chrome, chromium
  // for directory listing of `D:\Finaltests\test1\new\places`;
  // you can alternatively load the "Index of" document and retrieve
  // `.textContent` from `<a>` elements within `td` at `table` of
  // rendered `html`; note, `RegExp` to match file names
  // could probably be improved,  does not match space characters in file names
  var urls = $.unique(data.match(/\b(\w+|\d+)\.txt\b/g));
  return $.when.apply($, $.map(urls, (file) => {
    files.push(file);
    // `\`, or `/`, depending on filesystem type
    return $.ajax({url:path + "/" + file
                 , dataType:"text html"})
    .then((data) => {
      // return array of objects having property set to `file` name,
      // value set to text within `file`
      return {[file]:data}
    })
  }))
})
.then((...res) => {
  console.log(res, files)
})

Answer 2

出于安全原因，您无法使用javascript访问主机文件系统。你可以做的最好的事情是对服务器端脚本（例如php）进行单个ajax调用，该脚本将收集所有html文件并将它们返回给你的ajax调用。

gethtml.php：

<?php 


$output = "";

// your list of folders
$folders = [

    'D:\Finaltests\test1\new\places1',
    'D:\Finaltests\test1\old\places2',
    'D:\Finaltests\test1\whatever\places3'
];

foreach ($folders as $key => $dir) {

    if(!is_dir($dir))
        continue;
    // get all files of the directory
    $files = scandir($dir);
    foreach ($files as $file) {

        $finfo = finfo_open(FILEINFO_MIME_TYPE);

        if(finfo_file($finfo, $file) == 'text/plain')
            $output .= file_get_contents($dir . DIRECTORY_SEPARATOR . $file);

    }

}

echo $output;
exit;
 ?>

Ajax电话：

$.get('path/to/gethtml.php', function(response){

    $('body').html(response);

});

您可以根据要获取的文件类型（纯文本或文本/ html或其他）更改检查mime类型的php行

如何使用java脚本打印文件夹中的所有txt文件

2 个答案: