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?
Stanislav Pankevich
11.4k8 gold badges76 silver badges143 bronze badges
asked Dec 17, 2014 at 10:04
M. El-Set
7634 gold badges11 silver badges16 bronze badges
2 Answers 2
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>
answered Dec 17, 2014 at 10:20
Aminul
1,7382 gold badges26 silver badges43 bronze badges
Sign up to request clarification or add additional context in comments.
5 Comments
M. El-Set
Is it possible to skip the "Select a file" option and instead define the file to be read in my code? This is actually what I need. Not the user should choose the file but I should.
Aminul
@NGTHM4R3 yes I think
readAsText() has an overloaded version that accepts the file encoding , just use it like this for example reader.readAsText(file, 'ISO-8859-1');m_beta
Hi, tried this piece of code but the value of
readyState is always 0. Can someone help me with that?Aminul
@m_beta your request is in unsent state, have you missed the function call somehow
Phil
The second code snippet absolutely does not work and is also plagiarised from this (equally bad) answer
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>
Pang
10.2k146 gold badges87 silver badges126 bronze badges
1 Comment
dko
how would i be able to use that content in a local variable? For example, if I wanted to
var content = extractText() and later in window.onLoad() = function() { url: content , ...} - Would I do something like url: content.innerHTML to reference that response text?lang-js