FileAPIを利用したローカルファイルの読込

Tag:

HTML5で追加されたFileAPIの利用例を示します。

下記のサンプルでは、ブラウザ上にテキストファイルをドロップすると、そのテキストファイルの情報をブラウザ上に表示します。テキストファイルの文字コードはShift_JISを想定してます。(サンプルを参照)

FileAPIを利用したサンプルソース
ソース
html
<div id="drop" ondragover="onDragOver(event)" ondrop="onDrop(event)">
ここにテキストファイルをドロップ。
</div>

<div id="output" ></div>
css
#drop {
    width:300px; 
    height:150px;
    padding:10px; 
    border:1px solid #ccc; 
    color:#777; 
    margin-bottom:20px;
}
javascript
// (1) File API実装チェック
if (window.File) {
    document.getElementById("drop").addEventListener("drop", onDrop, false);
} else {
    window.alert("本ブラウザではFile APIが使えません");
}

function onDrop(event) {
    // (2) ドロップされたデータが保持しているFileオブジェクトのリスト情報を参照
    var files = event.dataTransfer.files;
    var output = document.getElementById("output");
    output.innerHTML = "";
    for (var i = 0; i < files.length; i++) {
        var file = files[i];

        // ファイル名を表示
        output.innerHTML += "ファイル名 :" + file.name + "<br />";

        if (file.type.match('text.*')) {
            // (3) FileReaderオブジェクトを生成
            var reader = new FileReader();           

            // (4) コールバックを設定(エラー発生時の処理)
            reader.onerror = function(e) {
                output.innerHTML = "読み取り時にエラーが発生しました。";
            };

            // (5) コールバックを設定(ファイル読込完了時の処理)
            reader.onload = function(e) {
                var filerslt = reader.result.replace(/(\r\n)/g, '<br />');
                // 読み込みんだ内容をブラウザ上に反映
                output.innerHTML += filerslt + "<br />";
            };

            // (6) ファイルの読込
            reader.readAsText(file, 'shift-jis');
        } else {
            output.innerHTML += '<div style="color:red">
                                 テキストファイルをドロップしてください。
                                 </div>' + '<br /><br />';
        }
    }
    // (7) ファイルがブラウザ上に展開されないようにする。
    event.preventDefault();
}

function onDragOver(event) {
    // ファイルがブラウザ上に展開されないようにする。
    event.preventDefault();
}

スポンサーリンク