Menu
I have read some of the previous questions on this topic but I really need to be 100% sure!
Is it possible to read from a .txt file on my local system and present it in my HTML-BODY?
I have tried several functions, here is one:
function readFile (path) { var fso = new ActiveXObject('Scripting.FileSystemObject'), iStream=fso.OpenTextFile(path, 1, false); while(!iStream.AtEndOfStream) { document.body.innerHTML += iStream.ReadLine() + '<br/>'; } iStream.Close(); } readFile("testing.txt"); The content of the file is simply around 100 words I want to read from the text file and display in my HTML-BODY.
Is this possible without having my own server?
718
Use the fs. readFileSync() method to read a text file into an array in JavaScript, e.g. const contents = readFileSync(filename, 'utf-8'). split('\n') . The method will return the contents of the file, which we can split on each newline character to get an array of strings.
JavaScript cannot typically access local files in new browsers, but the XMLHttpRequest object can be used to read files. So it is actually Ajax (and not Javascript) which is reading the file.
Make sure you check the source of the document once it's loaded in the browser (all browsers let you do this, right-click "view page source" or similar). If you see the contents of version. txt anywhere in there, you're on the right track, you just need to move it into the body tag so that it will be rendered.
You can use a FileReader object to read text file here is example code:
<div id="page-wrapper"> <h1>Text File Reader</h1> <div> Select a text file: <input type="file" id="fileInput"> </div> <pre id="fileDisplayArea"><pre> </div> <script> window.onload = function() { var fileInput = document.getElementById('fileInput'); var fileDisplayArea = document.getElementById('fileDisplayArea'); fileInput.addEventListener('change', function(e) { var file = fileInput.files[0]; var textType = /text.*/; if (file.type.match(textType)) { var reader = new FileReader(); reader.onload = function(e) { fileDisplayArea.innerText = reader.result; } reader.readAsText(file); } else { fileDisplayArea.innerText = "File not supported!" } }); } </script> Here is the codepen demo
If you have a fixed file to read every time your application load then you can use this code :
<script> var fileDisplayArea = document.getElementById('fileDisplayArea'); function readTextFile(file) { var rawFile = new XMLHttpRequest(); rawFile.open("GET", file, false); rawFile.onreadystatechange = function () { if(rawFile.readyState === 4) { if(rawFile.status === 200 || rawFile.status == 0) { var allText = rawFile.responseText; fileDisplayArea.innerText = allText } } } rawFile.send(null); } readTextFile("file:///C:/your/path/to/file.txt"); </script> Please find below the code that generates automatically the content of the txt local file and display it html. Good luck!
<html> <head> <meta charset="utf-8"> <script type="text/javascript"> var x; if(navigator.appName.search('Microsoft')>-1) { x = new ActiveXObject('MSXML2.XMLHTTP'); } else { x = new XMLHttpRequest(); } function getdata() { x.open('get', 'data1.txt', true); x.onreadystatechange= showdata; x.send(null); } function showdata() { if(x.readyState==4) { var el = document.getElementById('content'); el.innerHTML = x.responseText; } } </script> </head> <body onload="getdata();showdata();"> <div id="content"></div> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
