How to print all the txt files inside a folder using java script
Question
I need to print all the txt files from a directory inside an HTML using javascript. i tried to modify a code dealing with photos but I didn't success
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 + ")>");
});
}
});
2 answers
solution1
2 ACCPTED 2016-06-04 19:43:51
You can use <input type="file"> with multiple attribute set, accept attribute set to text/plain ; change event ; FileReader , for loop.
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>
You can also use webkitdirectory and allowdirs attributes for directory upload at chrome, chromium; at nightly 45+ or firefox 42+ where dom.input.dirpicker preference set to true , see Firefox 42 for developers , Select & Drop Files and/or Folders to be parsed . Note, you can also drop folders from file manager at <input type="file"> element
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
For ajax requests at chromium, chrome file: protocol local filesystem you can launch with --allow-file-access-from-files flag set, see Jquery load() only working in firefox? .
At firefox you can set security.fileuri.strict_origin_policy to false , see Security.fileuri.strict origin policy .
For a possible $.ajax() approach at chrome, chromium you can try
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)
})
solution2
0 2016-06-04 19:19:16
you can't reach the host filesystem with javascript for security reason. The best you can do is to make a single ajax call to a server-side script (php for exemple) that will collect all html file and return them to your ajax call.
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 call:
$.get('path/to/gethtml.php', function(response){
$('body').html(response);
});
you can change the line of php that check the mime type according to the type of the file you want to get (plain text or text/html or whatever)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.