難でもアリ: テキストファイルをjavascriptで読み込む

ローカルのテキスト(shift-jis)ファイルを
html上で使用することがあったのでメモ

まずはファイル選択ができるHTMLを作成します。

    <head>
    </head>
    <body>
    <input id="file" type="file" value="ファイル選択" />
    <div id ="finfo"></div>
    <div id ="result"></div>
    </body>

次にFileAPIを使います。対応しているブラウザじゃないと動きませんが
chrome、FireFoxあたりは動作確認しました

サンプルコードでは選択可能ファイルは１つだけです
shift-jis以外の場合は8行目の'Shift-Jis’を変更してください
デフォルトUTF-8です
ファイル選択ボタンからファイル選択するとすると変数outputにファイル内容が格納されます

<script>
document.querySelector("#file").addEventListener('change', function(e) {
  // File APIを利用できるかをチェック
  if (window.File) {
    var input = document.querySelector('#file').files[0];
    var reader = new FileReader();
    // ファイルの内容をテキストとして取得
    reader.readAsText(input, 'Shift-Jis');
    reader.addEventListener('load', function(e) {
      var output = reader.result;
      if (output === null){
        output = "";
      }
      var header = "[FileName] :" + input.name;
      header +="[size]" + input.size + "bytes";
      document.querySelector("#finfo").innerHTML = header;
      document.querySelector("#result").innerHTML = escbr(output);
      }
    }, true);
  }
}, true);

//HTMLエスケープと改行
function escbr(str) {
return str
        .replace(/&/g, '&amp;')
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;')
        .replace(/\r?\n/g, "<br />");
}
</script>

SAMPLE

エンコード：

ここにファイルをドロップ

【結果】

2015年6月14日日曜日

テキストファイルをjavascriptで読み込む

0 件のコメント:

ラベル