HTML sendiri tidak boleh membaca terus fail teks, tetapi fungsi ini boleh dicapai melalui bahasa pengaturcaraan belakang (seperti PHP, Python, Java) atau teknologi JavaScript bahagian hadapan. Kaedah backend menggunakan fungsi file_get_contents() PHP untuk membaca kandungan daripada fail teks dan membenamkannya ke dalam halaman HTML. Kaedah JavaScript bahagian hadapan menggunakan API Ambil untuk menghantar permintaan GET ke fail teks pada pelayan, kemudian menghuraikan kandungan respons dan memaparkannya dalam halaman HTML.
HTML sendiri tidak mempunyai keupayaan untuk membaca fail teks secara langsung, kerana HTML ialah bahasa penanda, terutamanya digunakan untuk membina dan mempersembahkan struktur dan kandungan halaman web, dan bukannya mengendalikan operasi seperti membaca fail. Untuk membaca fail teks dan membenamkan kandungannya ke dalam halaman HTML, anda biasanya perlu menggunakan bahasa pengaturcaraan bahagian belakang (seperti PHP, Python, Java, dll.) atau teknologi JavaScript bahagian hadapan.
Yang berikut akan memperkenalkan kaedah menggunakan bahasa pengaturcaraan bahagian belakang dan teknologi JavaScript bahagian hadapan untuk membaca fail teks dan membenamkannya ke dalam halaman HTML.
1. Gunakan bahasa pengaturcaraan bahagian belakang untuk membaca fail teks
Ia adalah kaedah biasa untuk menggunakan bahasa pengaturcaraan bahagian belakang untuk membaca fail teks dan membenamkan kandungannya ke dalam halaman HTML. Mari kita ambil PHP sebagai contoh untuk menggambarkan proses ini:
1 Cipta fail teks
Pertama, anda memerlukan fail teks untuk menyimpan kandungan yang ingin anda baca. Katakan anda mempunyai fail teks bernama example.txt dengan kandungan berikut:
这是一些示例文本。 它将被读取并显示在HTML页面上。
2 Tulis kod PHP untuk membaca fail teks
Kemudian, anda boleh menggunakan fungsi file_get_contents() PHP untuk membaca kandungan fail teks. . Berikut ialah contoh skrip PHP mudah:
<?php
$file = 'example.txt';
$text = file_get_contents($file);
if ($text === false) {
echo "无法读取文件: $file";
} else {
echo nl2br($text); // nl2br函数将换行符转换为<br>标签，以便在HTML中正确显示
}
?>Dalam skrip ini, fungsi file_get_contents() membaca kandungan fail yang ditentukan dan menyimpannya dalam pembolehubah $text. Jika bacaan gagal, ia akan kembali palsu, di mana anda boleh mencetak mesej ralat. Jika tidak, anda boleh menggunakan pernyataan gema untuk mengeluarkan kandungan teks ke halaman HTML.
3. Benamkan kod PHP ke dalam HTML
Seterusnya, anda boleh membenamkan kod PHP ke dalam fail HTML untuk memaparkan kandungan teks yang dibaca dalam penyemak imbas. Ini biasanya dicapai dengan meletakkan kod PHP dalam teg Contohnya:
<!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 Konfigurasikan pelayan dan akses halaman
Akhir sekali, anda perlu menggunakan fail .html (sebenarnya fail .php dalam kes ini, kerana ia mengandungi kod PHP) kepada PHP yang didayakan. web pada pelayan seperti Apache atau Nginx. Pelayan perlu dikonfigurasikan untuk dapat menghuraikan kod PHP. Setelah dikonfigurasikan, anda boleh mengakses halaman melalui penyemak imbas anda dan melihat kandungan dibaca daripada fail teks dan dibenamkan.
2 Gunakan JavaScript bahagian hadapan untuk membaca fail teks
Walaupun HTML itu sendiri tidak boleh membaca fail, JavaScript bahagian hadapan menyediakan teknologi seperti API Fail dan API Ambil, yang membolehkan pengguna membaca fail setempat di sebelah penyemak imbas atau meminta. melalui rangkaian Dapatkan kandungan fail. Berikut ialah contoh membaca fail teks daripada pelayan menggunakan JavaScript dan API Ambil:
1 Letakkan fail teks pada pelayan
Mula-mula, anda perlu meletakkan fail teks (cth. example.txt) pada. pelayan web , supaya ia boleh diakses melalui permintaan HTTP.
2. Tulis kod JavaScript untuk membaca fail teks
Kemudian, anda boleh menggunakan API Ambil JavaScript untuk menghantar permintaan GET ke URL fail teks pada pelayan dan membaca kandungan respons. Berikut ialah contoh mudah:
<!DOCTYPE html>
<html>
<head>
<title>使用JavaScript读取文本文件</title>
</head>
<body>
<h1>读取的文本内容</h1>
<pre id="textContent">
![Kursus bahagian hadapan yang paling memahami anda: HTML5/CSS3/ES6/NPM/Vue/...[Asal]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
