cheka.jp 超不定期で更新する写真達。お口直しにどうぞ。

ちゃんとHTML5を理解しよう File API

History APIに引き続きHTML5で追加されたAPIを復習していきます。

W3C HTML5 Logo

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>

Add a Comment

メールアドレスが公開されることはありません。

Get Adobe Flash player