html でテキストファイルを読む方法_html でテキストファイルを読む方法-htmlチュートリアル-php.cn

HTML 自体はテキストファイルを直接読み取ることはできませんが、この機能はバックエンドプログラミング言語 (PHP、Python、Java など) またはフロントエンド JavaScript テクノロジを通じて実現できます。バックエンドメソッドは、PHP の file_get_contents() 関数を使用して、テキストファイルからコンテンツを読み取り、HTML ページに埋め込みます。フロントエンド JavaScript メソッドは、Fetch API を使用して GET リクエストをサーバー上のテキストファイルに送信し、応答コンテンツを解析して HTML ページに表示します。

HTMLでテキストファイルを読む方法

HTML はマークアップ言語であり、主に Web ページの構造とコンテンツを構築して表示するために使用されるため、HTML 自体にはテキストファイルを直接読み取る機能がありません。ファイルの読み取りなどの操作を処理するのではなく。テキストファイルを読み取り、そのコンテンツを HTML ページに埋め込むには、通常、バックエンドプログラミング言語 (PHP、Python、Java など) またはフロントエンド JavaScript テクノロジを使用する必要があります。

以下では、バックエンドプログラミング言語とフロントエンド JavaScript テクノロジを使用してテキストファイルを読み取り、HTML ページに埋め込む方法を紹介します。

1. バックエンドプログラミング言語を使用したテキストファイルの読み取り

バックエンドプログラミング言語を使用してテキストファイルを読み取り、埋め込むのが一般的です。そのコンテンツを HTML ページに変換します。以下では、このプロセスを説明するための例として PHP を使用しています:

1. テキストファイルを作成します

まず、必要なコンテンツを保存するためのテキストファイルが必要です。読む。次の内容を含む example.txt という名前のテキストファイルがあるとします:

这是一些示例文本。  
它将被读取并显示在HTML页面上。

ログイン後にコピー

2. テキストファイルを読み取るための PHP コードを記述します

これで、PHP を使用できるようになります。テキストファイルの内容を読み取る file_get_contents() 関数。以下に簡単な PHP スクリプトの例を示します。

<?php  
$file = &#39;example.txt&#39;;  
$text = file_get_contents($file);  
  
if ($text === false) {  
    echo "无法读取文件: $file";  
} else {  
    echo nl2br($text); // nl2br函数将换行符转换为<br>标签，以便在HTML中正确显示  
}  
?>

ログイン後にコピー

このスクリプトでは、file_get_contents() 関数が指定されたファイルの内容を読み取り、変数 $text に保存します。読み取りが失敗した場合は false が返され、その時点でエラーメッセージを出力できます。それ以外の場合は、echo ステートメントを使用して、テキストコンテンツを HTML ページに出力できます。

3. PHP コードを HTML に埋め込む

次に、PHP コードを HTML ファイルに埋め込んで、読み取ったテキストコンテンツをブラウザーに表示できます。これは通常、.php ファイルのタグ内に PHP コードを配置することで実現されます。例:

<!DOCTYPE html>  
<html>  
<head>  
    <title>读取文本文件示例</title>  
</head>  
<body>  
    <h1>读取的文本内容</h1>  
    <p>  
        <?php  
        // 这里是之前编写的PHP代码  
        $file = &#39;example.txt&#39;;  
        $text = file_get_contents($file);  
        if ($text === false) {  
            echo "无法读取文件: $file";  
        } else {  
            echo nl2br($text);  
        }  
        ?>  
    </p>  
</body>  
</html>

ログイン後にコピー

4. サーバーを設定してページにアクセスします

最後に、.html ファイル (この場合は実際には .php ファイル) を追加する必要があります。、PHP コードが含まれているため)、Apache や Nginx などの PHP 対応 Web サーバーにデプロイされます。サーバーは、PHP コードを解析できるように構成する必要があります。構成が完了すると、ブラウザを通じてページにアクセスし、テキストファイルから読み取られて埋め込まれたコンテンツを確認できます。

2. フロントエンド JavaScript を使用してテキストファイルを読み取る

HTML 自体はファイルを読み取ることができませんが、フロントエンド JavaScript は File API や Fetch API などのテクノロジーを提供します。ユーザーがブラウザ側でローカルファイルを読み取ったり、ネットワークリクエストを通じてファイルのコンテンツを取得したりできるようにします。以下は、JavaScript と Fetch API を使用してサーバーからテキストファイルを読み取る例です:

1. テキストファイルをサーバーに配置します

まず、テキストファイル (example.txt など) を Web サーバーに配置して、アクセスできるようにする必要があります。 HTTP リクエストを通じて。

2. テキストファイルを読み取るための JavaScript コードを作成します

次に、JavaScript の Fetch API を使用して、サーバー上のテキストファイル URL に GET リクエストを送信し、 read 応答内容を取得します。以下に簡単な例を示します。

<!DOCTYPE html>  
<html>  
<head>  
    <title>使用JavaScript读取文本文件</title>  
</head>  
<body>  
    <h1>读取的文本内容</h1>  
    <pre id="textContent">

人気のチュートリアル

詳細>

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

HTMLでテキストファイルを読む方法