All geek questions in one place

How to print all txt files inside a folder using java script

I need to print all txt files from a directory inside HTML using javascript. I tried changing the code associated with the photos, but I did not succeed

How to upload all images from one of my folders to 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 + ")>"); }); } });
+1
source share
2 answers

You can use <input type="file"> with the attribute of the multiple attribute, the accept attribute is set to text/plain ; change event; FileReader loop, 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>

You can also use the webkitdirectory and allowdirs to load the directory on chrome, chromium; at night 45+ or firefox 42+, where dom.input.dirpicker preferable to true , see Firefox 42 for developers , Select and unzip files and / or folders for analysis . Please note: you can also drop folders from the file manager in the <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 for chrome, chrome file: the local file system protocol can you run with the --allow-file-access-from-files flag --allow-file-access-from-files , see Jquery load (), which works only in firefox? .

In firefox, you can set security.fileuri.strict_origin_policy to false , see Security.fileuri.strict origin policy .

For a possible $.ajax() approach on chrome, chrome 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) })
+3
source

you cannot contact the host file system using javascript for security. The best you can do is make one ajax call on a server side script (e.g. php) that will collect all html files 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 php line that checks the mime type according to the type of file you want to receive (plain text or text / html or something else)

0
source

Source: https://habr.com/ru/post/1269373/

More articles:


All Articles