javascript - 如何使用javascript打印文件夹内的所有txt文件

标签 javascript jquery

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


        });
    }
});

最佳答案

您可以使用<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>

<小时/>

您还可以使用webkitdirectoryallowdirs chrome、chromium 目录上传的属性;在 nightly 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

<小时/>

对于ajax请求 Chrome , Chrome file:协议(protocol)本地文件系统,您可以使用 --allow-file-access-from-files 启动标志设置,请参阅 Jquery load() only working in firefox?

在 Firefox 中您可以设置 security.fileuri.strict_origin_policyfalse ,参见 Security.fileuri.strict origin policy .

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

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

关于javascript - 如何使用javascript打印文件夹内的所有txt文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42632235/

相关文章:

jquery - 如何使用 JQuery 定位 &lt;iframe&gt; 内的 <div>?

javascript - 不使用 document.write 插入 head 标签中的特定位置

javascript - 如何从数据表中深层嵌套的对象中读取信息?

jquery - 使用 Bootstrap 在某些设备上内联显示列表

javascript - 将 .json 模型导入 Three.js

javascript数组重新开始计数

javascript - 对 Instagram Web 的 JSONP 调用返回未捕获的语法错误 : Unexpected token :

javascript - 如何将传入的文件流从 Node 保存到 AngularJS

jquery - 如何使用表排序脚本对跨度列标题进行排序

javascript - 如何批量解析网页?