ちゃんとHTML5を理解しよう File API
History APIに引き続きHTML5で追加されたAPIを復習していきます。
File APIを学ぶ
今回はFile APIです。
javascriptはブラウザで動作するjavascriptを前提として話を進めます。
File APIとは
今までのjavascriptはローカルのファイルにアクセスすることが出来ない仕様でした。
HTML5で追加されたFile APIを利用すると、ローカルのファイルへアクセすることが可能になります。
File APIの基本
ファイル情報へアクセするためには、ユーザーにファイルを明示的に選択させる必要があります。
明示的に選択させる方法は、ファイル選択のダイアログで選択させる方法とDrag Drop APIと連動させる方法の2つの選択肢があります。
Drag Drop APIと連動させる方法は別の機会にして、今回はダイアログ表示で選択させる方法で動作確認してみたいと思います。
ファイルを選択するとinputのchangeイベントが発生するので、changeイベントを監視して処理を行います。
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$('#fileSelect').on('change', function(event) {
var file = event.target.files[0];
$('#showArea').html(file + 'を選択しました!');
});
});
</script>
</head>
<body>
<input type="file" accept="text/plain" id="fileSelect">
<div id="showArea"></div>
</body>
</html>
ではFile APIを使ってみましょう。
ローカルにテスト用のテキストファイルを準備して下さい。
こんにちは！ ローカルのファイルですよ!
ロジックを記述していきます。
$(function(){
$('#fileSelect').on('change', function(event) {
var file = event.target.files[0];
//ファイル読み込み処理
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event){
$('#showArea').html(file.name + 'を選択しました!<br />' + event.target.result);
}
});
});
動作確認もしておきましょう。
出来上がったサンプルコード
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$('#fileSelect').on('change', function(event) {
var file = event.target.files[0];
//ファイル読み込み処理
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event){
$('#showArea').html(file.name + 'を選択しました!<br />' + event.target.result);
}
});
});
</script>
</head>
<body>
<input type="file" accept="text/plain" id="fileSelect">
<div id="showArea"></div>
</body>
</html>
このページを読んだ人にオススメのブログ記事です！
About The Author
