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

Z时代
2024-01-10
分类：问答

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

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 + ")>");
        });
    }
});

回答：

您可以使用<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，chrome上进行目录上传；在dom.input.dirpicker偏好设置为每晚45+或firefox42+的情况下true，选择和删除文件和/或要解析的文件夹。注意，您也可以从文件管理器中的<inputtype="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>

对于可以ajax在铬，铬file:协议本地文件系统上启动的请求，可以--allow-file-access-from-files设置标志来启动。

在Firefox中你可以设置security.fileuri.strict_origin_policy到false，看到Security.fileuri.strict

originpolicy。

对于$.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)
})