一尘不染

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

javascript

我需要使用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 + ")>");


        });
    }
});

阅读 393

收藏
2020-05-01

共1个答案

一尘不染

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

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>

您还可以使用webkitdirectoryallowdirs属性在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_policyfalse,看到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)
})
2020-05-01