Home >Web Front-end >HTML Tutorial >How to read text files in html
HTML itself cannot directly read text files, but this functionality can be achieved through back-end programming languages (such as PHP, Python, Java) or front-end JavaScript technology. The backend method uses PHP's file_get_contents() function to read the content from the text file and embed it into the HTML page. The front-end JavaScript method uses the Fetch API to send a GET request to a text file on the server, then parses the response content and displays it in an HTML page.
HTML itself does not have the ability to directly read text files, because HTML is a markup language, mainly used to build and present web page structure and content. Rather than handling operations such as file reading. To read a text file and embed its content into an HTML page, you usually need to use a back-end programming language (such as PHP, Python, Java, etc.) or front-end JavaScript technology.
The following will introduce the methods of using back-end programming language and front-end JavaScript technology to read text files and embed them into HTML pages.
1. Using a back-end programming language to read a text file
It is common to use a back-end programming language to read a text file and embed its content into an HTML page. Methods. The following uses PHP as an example to illustrate this process:
1. Create a text file
First, you need a text file to store the content you want to read. Suppose you have a text file named example.txt with the following content:
这是一些示例文本。 它将被读取并显示在HTML页面上。
2. Write PHP code to read the text file
Then, you can use PHP The file_get_contents() function to read the contents of a text file. The following is a simple PHP script example:
<?php
$file = 'example.txt';
$text = file_get_contents($file);
if ($text === false) {
echo "无法读取文件: $file";
} else {
echo nl2br($text); // nl2br函数将换行符转换为<br>标签，以便在HTML中正确显示
}
?>In this script, the file_get_contents() function reads the contents of the specified file and stores it in the variable $text. If the read fails, it will return false, at which point you can print an error message. Otherwise, you can use the echo statement to output the text content to the HTML page.
3. Embed PHP code into HTML
Next, you can embed the PHP code into the HTML file to render the read text content in the browser . This is usually accomplished by placing the PHP code within the f94092635d00f016dcf35890fa848e0b tags of the .php file. For example:
<!DOCTYPE html>
<html>
<head>
<title>读取文本文件示例</title>
</head>
<body>
<h1>读取的文本内容</h1>
<p>
<?php
// 这里是之前编写的PHP代码
$file = 'example.txt';
$text = file_get_contents($file);
if ($text === false) {
echo "无法读取文件: $file";
} else {
echo nl2br($text);
}
?>
</p>
</body>
</html>4. Configure the server and access the page
Finally, you need to add the .html file (actually a .php file in this case, because It contains PHP code) deployed to a PHP-enabled web server, such as Apache or Nginx. The server needs to be configured to be able to parse PHP code. Once configured, you can access the page through your browser and see the content read from the text file and embedded.
2. Use front-end JavaScript to read text files
Although HTML itself cannot read files, front-end JavaScript provides technologies such as File API and Fetch API, allowing users to Read local files on the browser side or obtain file contents through network requests. Here is an example of reading a text file from a server using JavaScript and the Fetch API:
1. Place the text file on the server
First, you need to place the text file (such as example.txt) on the web server so that it can be accessed through HTTP requests .
2. Write JavaScript code to read the text file
Then, you can use JavaScript’s Fetch API to send a GET request to the text file URL on the server and read Get the response content. The following is a simple example:
<!DOCTYPE html>
<html>
<head>
<title>使用JavaScript读取文本文件</title>
</head>
<body>
<h1>读取的文本内容</h1>
<pre id="textContent">