如何使用Javascript(或PHP)读取.txt文件并将内容插入html网页

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

本文关键字：插入 网页 html 文件 txt Javascript 何使用 PHP 读取      更新时间：2023-09-26

我花了很多时间试图弄清楚这一点，尽管它似乎应该相当简单。我在一个网站上工作的javascript文件，生成html代码给定文件夹的路径名。目前我能够从这些文件夹拉图像没有问题，但我试图找出。txt文件…

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

info[i]是一个数组，存储我想要从…中抓取文件的每个文件夹的名称

每个文件夹中都有一个图片名为picture。png，还有一个文本文件名为details。txt

有没有可能有像…

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

我也试过下面的代码，我根本无法得到。txt内容显示在浏览器中。txt文件中有文字，和html文件在同一个文件夹中…如果我能让下面的代码工作并在网页上显示文件，那么我就能回答我剩下的问题了。

<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>

感谢您的时间，任何帮助都是非常感激的。

如果你使用PHP，那就相对容易了

首先使用PHP代码获取文件内容

 $file_content = file_get_contents('details.txt');
然后在JavaScript中传递变量 
<script>
 var details = '<?php echo $file_content; ?>';
</script>

如果你完全在客户端工作，你真的只有一个选择，如果你必须使用。txt文件，而不是。js文件(这将允许你"require"

<标题> AJAX h1> 。这意味着AJAX调用之后的行将在文件被加载之前运行。对于您的情况，实现可能如下所示: 
;(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();
})();

但是，如果您可以从PHP访问文件夹列表(info[i]变量)，那么您可以轻松地执行以下操作:

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");
    }
?>
相关文章：