How can I read a .txt file with Javascript(or PHP) and insert the contents into an html webpage?

Question

I have spent many hours trying to figure this out, though it seems it should be quite straightforward. I'm working on a website with a javascript file that generates html code given the pathname of a folder. Currently I am able to pull images from those folders no problem, but am trying to figure out .txt files...

document.write('<img src="folder/' + info[i] + '/picture.png">');

info[i] is an array storing the name of each folder I want to grab files from...

So in every folder there is an image called picture.png, there is also a text file called details.txt

Is it possible to have something like...

var details;
details = readFile('"folder/' + info[i] + '/details.txt"');
document.write(details);

I have also tried the following code, I simply can't get the .txt contents to showup in the browser. The .txt file has words in it, and is in the same folder as the html file... If I can get the code below to work and display the file on the webpage, then I'll be able to answer the rest of my question.

<html>
<body>

Contents:

<?php $file_content = file_get_contents('details.txt'); ?>

<script type="text/javascript">

var details = '<?php echo $file_content ; ?>';

document.write(details);

</script>

</body>
</html>

Thank you for your time, any help is greatly appreciated.

You can use ajax to read a txt file but first you might want to learn about creating HTML elements rather than using document.write — Popnoodles, May 21 '14 at 22:51
I understand javascript can only read files locally without ajax. I've uploaded the files in a folder to a webhosting service index.html folder So that would be server side? Sorry I'm not exactly sure — user3662813, May 21 '14 at 22:52
JS can read local or remote files depending on where the code is run from (it could be run locally). It's important, for the question, to know where these files are. — Popnoodles, May 21 '14 at 22:53
Looks like: http://stackoverflow.com/questions/13329853/reading-server-file-with-javascript — Stefan, May 21 '14 at 22:53
So, question is (as @merlin2011 asked): where is the file you want to read? On the server? Load it via PHP & output it to the client. On the client? You might be able to do it on the client via Javascript (I've never tried) or by uploading it to the server & processing it with PHP. — Kryten, May 21 '14 at 22:53

Shuvo · Answer 1 · 2014-05-21T23:28:01.440

0

If you use PHP then it is comparatively easy

first use PHP code to get the file contents

 $file_content = file_get_contents('details.txt');

Then in JavaScript transfer the variable

<script>

 var details = '<?php echo $file_content; ?>';

</script>

edited May 21 '14 at 23:28

answered May 21 '14 at 22:58

Shuvo

41
12

hmm I've tried putting that into an html document and the page still comes up blank. After var details = I added document.write(details); The html file and the details.txt are in the same folder now, for testing this out.. I also put the php part inside – user3662813 May 21 '14 at 23:10
since data from details.txt is in string format, just put a ' around the php tags inside . should work – Shuvo May 21 '14 at 23:27
Thank you for your quick reply, I tried that as well.. along with several other variations.. I'm not sure what I'm doing wrong here it can't be this difficult – user3662813 May 21 '14 at 23:55
bit surprising, cause I tested the code and it does work.I made some correction to the code from the first post, you might want to try it again. – Shuvo May 23 '14 at 10:59

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

If you're working completely in the client, you really only have one option if you must work with .txt files, and not .js files (which would allow you to "require" the JS data files as needed.

AJAX

If you don't know anything about AJAX, the key thing to know is that it is asynchronous. This means that the lines following the AJAX call will be run before the file is guaranteed to be loaded. An implementation might look something like the following, for your case:

;(function(){
    var req = new XMLHttpRequest,
    folder = folder;

    //Div that the output will go into once it's loaded
    document.write('<div id="' + folder + '"></div>');
    req.open('GET', 'folder/' + folder + '/details.txt');
    req.onreadystatechange = function () {
        if (req.readyState == 4) {
            document.getElementById(folder).innerHTML = req.responseText;
        }
    }
    req.send();
})();

If, however, you can access the list of folders (the info[i] variable) from PHP, then you could easily do something like the following:

PHP

<?php

    $info = Array("some","folders","to","load");
    foreach($info as $folder) {
        //echo out the image tag followed by the description
        echo '<img src="folder/' . $folder . '/picture.png">';
        readfile("folder/" . $folder . "/details.txt");
    }
?>

If you found that it didn't work the first time, I made some edits (typos in the code, I didn't test it) — Sean Johnson, May 22 '14 at 00:02

How can I read a .txt file with Javascript(or PHP) and insert the contents into an html webpage?

2 Answers2

AJAX

PHP