ソースコード
ネットで見かける例はむやみに複雑なので、極力単純化して書く。
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function(){
var reader;
function onChange(event) {
reader.readAsText(event.target.files[0]);
}
function onLoad(event) {
console.log(JSON.parse(event.target.result));
}
reader = new FileReader();
reader.onload = onLoad;
$('input[type="file"]').on('change', onChange);
});
</script>
</head>
<body>
<input type="file">
</body>
</html>
ポイントは以下の2点。
-
input要素のonChangeイベントでファイルを特定する -
FileReaderオブジェクトのonLoadイベントでファイルの内容を知る
ハンドラの設定
まず、HTML中には<input type="file">を置く。<input type="file" multiple>としてもよい。
<input type="file">
onChangeイベントのハンドラを設定する。jQueryを使うならこんな感じ。
$('input[type="file"]').on('change', onChange);
ファイルを読み込むにはFileReaderオブジェクトを使用する。あらかじめオブジェクトを生成し、ハンドラを設定しておく。
var reader;
reader = new FileReader();
reader.onload = onLoad;
input要素のonChangeイベントでファイルを特定する
input要素でファイルを選択するとonChangeイベントが発火し、ハンドラが呼出される。
ハンドラではevent.target.filesでファイルを特定し、FileReaderのreadAsText()を使って内容を読み込む。
multipleとした場合に複数のファイルが特定されるので、event.target.filesは必ず配列になる。単数ファイルの読み込みの場合は最初の要素だけ使えばよい。
function onChange(event) {
reader.readAsText(event.target.files[0]);
}
FileReaderオブジェクトのonLoadイベントでファイルの内容を知る
ファイルを読み込み終わるとonLoadイベントが発火し、ハンドラが呼出される。
event.target.resultに全文が入っているので、JSON.parse()でオブジェクト化すればよい。
function onLoad(event) {
console.log(JSON.parse(event.target.result));
}
間違ったファイルを指定した場合はオブジェクト化できないので例外が発生する。