JavaScriptでテキストファイルを読み取って表示する
JavaScriptでテキストファイルを読み取って、ブラウザに表示してみました。
目次
手順
こういう手順で進めます。
入力フォームでファイルを選択する
FileReaderオブジェクトでファイルを読み込む
pre要素に内容を書き込む
ちょっと独特なのは、FileReaderオブジェクトにloadイベントリスナを設定しておいて、オブジェクトのloadイベントが発生したらイベントリスナの側でタグの書き換えを行うというところです。
コード
まずはhtmlです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>File Read</title>
<script type="text/javascript" src="./fileread.js"></script>
</head>
<body>
<form>
<input id="selectFile" type="file" name="selectFile" />
</form>
<pre id="output"></pre>
</body>
</html>
form要素のinput要素のtype属性をfileにすると、ファイルを選択するフォームが表示されます。input要素にmultiple属性を設定しない場合は、単一のファイルの選択になります。
input要素とpre要素にid属性を指定しますが、JavaScriptの方でid属性を使って要素の検索をしますので、一意な名前にします。
JavaScriptのコードはfileread.jsというファイルに記述して、script要素で読み込みをします。
fileread.jsのコードは下記のようにします。
window.addEventListener('DOMContentLoaded', function(){
document.getElementById("selectFile").addEventListener('change', function(){
var input = document.getElementById("selectFile").files[0];
var reader = new FileReader();
reader.addEventListener('load', function(){
document.getElementById("output").textContent = reader.result;
}, false);
reader.readAsText(input, 'UTF-8');
}, false);
});
windowにaddEventListenerでDOMContentLoadedイベントのリスナを追加します。ドキュメントを読み込んだときに実行されます。
idがselectFileの要素（input要素）にaddEventListenerでchangeイベントのリスナを追加します。
idがselectFileの要素（input要素）のfilesプロパティを参照すると、選択されたファイルを取得できます。配列が帰ってくるのですが、ファイルが1つとわかっているので、インデックス0を指定します。
FileReaderのオブジェクトをreaderという名前で作ります。
FileReaderオブジェクトにloadイベントのリスナを追加し、outputというidの要素（pre要素）のtextContentプロパティにFileReaderオブジェクトのresultプロパティを入力するようにします。
FileReaderオブジェクトのreadAsTextメソッドを実行します。そうするとファイルが読み込まれるとともにloadイベントが呼び出されます。
試してみた
fileread.jsを読み込んでみました。
公開日
広告