HTMLでテキストファイルを読み込む方法を解説！

予め文章を用意しておいて、HTMLでテキストファイルとして読み込みたいというケースを考えます。

ここではそのHTMLでテキストファイルとして読み込みを行う2つの方法を紹介します。

ではHTMLでテキストファイルを読み込む方法について解説します。

まずHTMLのみでテキストファイルを読み込む方法について解説します。

HTML要素としてはobject要素を用います。

そしてdata属性に予め用意しているtxtファイルのパスを指定し、type属性にtext/plainと記述します。

ではサンプルコードを用意したので確認してみましょう。

上記のようにsample.txtの中身が表示されていることが分かります。

JSを用いてテキストファイルを読み込むにはWeb APIのFileReaderオブジェクトを用います。

早速ですがサンプルコードで確認してみましょう。

txtファイルを選択していただくとテキストエリアにファイルの中身を表示させることができます。

JSのコード解説をします。

まずファイルが選択された場合の処理をするためにchangeイベントで記述しています。

event.target.filesには選択されたファイルが配列形式で格納されています。

そしてここでFileReaderをインスタンス化しておきます。

また.readAsTextメソッドを用いてテキスト形式でファイルを読み込みます。

最後に.onloadメソッドを用いてファイルの読み込みが終わるとともに、テキストエリアにファイルの内容が反映されるようコードを記述しています。

いかがでしたでしょうか？

ここで紹介した方法を用いてぜひHTMLでテキストファイルを読み込んでみてください。