我需要使用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循环。
<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">元素删除文件夹
webkitdirectory
allowdirs
dom.input.dirpicker
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设置标志来启动。
ajax
file:
--allow-file-access-from-files
在Firefox中你可以设置security.fileuri.strict_origin_policy到false,看到Security.fileuri.strict originpolicy。
security.fileuri.strict_origin_policy
false
Security.fileuri.strict originpolicy
对于$.ajax()铬的一种可行方法,您可以尝试使用铬
$.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) })