File APIを使ってローカルのファイルを読み込んでみる

JavaScript

HTML5のFile APIについて少し調べる機会がありましたので、JavaScriptを使ってローカルからファイルを読み込んで、ブラウザ上に表示するところまでを試してみます。

画像の読み込み

ローカルの画像を読み込んで、ブラウザ上に表示させてみます。
<input type="file">でファイルの読み込みを行い、読み込んだ結果を#resultに出力します。

■HTML

<input type="file" name="file" id="file">
<div id="result"></div>

■JavaScript

var file = document.getElementById('file');
var result = document.getElementById('result');

// File APIに対応しているか確認
if(window.File && window.FileReader && window.FileList && window.Blob) {
    function loadLocalImage(e) {
        // ファイル情報を取得
        var fileData = e.target.files[0];
        console.log(fileData); // 取得した内容の確認用

        // 画像ファイル以外は処理を止める
        if(!fileData.type.match('image.*')) {
            alert('画像を選択してください');
            return;
        }

        // FileReaderオブジェクトを使ってファイル読み込み
        var reader = new FileReader();
        // ファイル読み込みに成功したときの処理
        reader.onload = function() {
            var img = document.createElement('img');
            img.src = reader.result;
            result.appendChild(img);
        }
        // ファイル読み込みを実行
        reader.readAsDataURL(fileData);
    }
    file.addEventListener('change', loadLocalImage, false);

} else {
    file.style.display = 'none';
    result.innerHTML = 'File APIに対応したブラウザでご確認ください';
}

FileReaderオブジェクトのreadAsDataURL()メソッドを使って読み込みを行っています。

サンプルページ

CSVの読み込み

ローカルのCSVファイルを読み込んで、tableタグで整形して出力してみます。
HTMLは先ほどと同じのため省略します。

■JavaScript

var file = document.getElementById('file');
var result = document.getElementById('result');

// File APIに対応しているか確認
if(window.File && window.FileReader && window.FileList && window.Blob) {
    function loadLocalCsv(e) {
        // ファイル情報を取得
        var fileData = e.target.files[0];
        console.log(fileData); // 取得した内容の確認用

        // CSVファイル以外は処理を止める
        if(!fileData.name.match('.csv$')) {
            alert('CSVファイルを選択してください');
            return;
        }

        // FileReaderオブジェクトを使ってファイル読み込み
        var reader = new FileReader();
        // ファイル読み込みに成功したときの処理
        reader.onload = function() {
            var cols = reader.result.split('\n');
            var data = [];
            for (var i = 0; i < cols.length; i++) {
                data[i] = cols[i].split(',');
            }
            var insert = createTable(data);
            result.appendChild(insert);
        }
        // ファイル読み込みを実行
        reader.readAsText(fileData);
    }
    file.addEventListener('change', loadLocalCsv, false);

} else {
    file.style.display = 'none';
    result.innerHTML = 'File APIに対応したブラウザでご確認ください';
}

function createTable(data) {
    var table = document.createElement('table');
    for (var i = 0; i < data.length; i++) {
        var tr = document.createElement('tr');
        for (var j = 0; j < data[i].length; j++) {
            var td = document.createElement('td');
            td.innerText = data[i][j];
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    return table;
}

サンプルページ

ファイル読み込みまでの流れは画像の時と大きくは変わりませんが、CSVを読み込む場合はreadAsDataURL()メソッドではなくreadAsText()メソッドを使って読み込みます。

readAsText()は第二引数で文字コードを指定でき、省略した場合はUTF-8になります。
そのため、上記サンプルでは文字コードがShift_JISで日本語を含んだCSVだと文字化けしてしまいます。

第二引数の文字コードにShift_JISを指定してみます。

■JavaScript

var file = document.getElementById('file');
var result = document.getElementById('result');

// File APIに対応しているか確認
if(window.File && window.FileReader && window.FileList && window.Blob) {
    function loadLocalCsv(e) {
        // ファイル情報を取得
        var fileData = e.target.files[0];
        console.log(fileData); // 取得した内容の確認用

        // CSVファイル以外は処理を止める
        if(!fileData.name.match('.csv$')) {
            alert('CSVファイルを選択してください');
            return;
        }

        // FileReaderオブジェクトを使ってファイル読み込み
        var reader = new FileReader();
        // ファイル読み込みに成功したときの処理
        reader.onload = function() {
            var cols = reader.result.split('\n');
            var data = [];
            for (var i = 0; i < cols.length; i++) {
                data[i] = cols[i].split(',');
            }
            var insert = createTable(data);
            result.appendChild(insert);
        }
        // ファイル読み込みを実行
        reader.readAsText(fileData, 'Shift_JIS');
    }
    file.addEventListener('change', loadLocalCsv, false);

} else {
    file.style.display = 'none';
    result.innerHTML = 'File APIに対応したブラウザでご確認ください';
}

function createTable(data) {
    var table = document.createElement('table');
    for (var i = 0; i < data.length; i++) {
        var tr = document.createElement('tr');
        for (var j = 0; j < data[i].length; j++) {
            var td = document.createElement('td');
            td.innerText = data[i][j];
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    return table;
}

サンプルページ

Shift_JISでのファイルは正しく読み込めるようになりましたが、UTF-8のファイルの場合は文字化けするようになりました。
案件で使用する場合、あらかじめ使用する想定の文字コードを決めておくなど、何らかの対応が必要になりそうです。

【参考】