angularJS_javascript_fileread

[AngularJS] [JavaScript] 外部テキストファイルの読み込み

非同期で外部テキストを読み込む処理は、「$httpを使った非同期読み込み」を行うほうがスマートかもしれません。

ここでは、外部で用意したテキストファイルをJavaScriptで読み込む例を記載します。

fileReadTest.html   <== ここでJavaScriptを記述するとする
hello.txt           <== 「Hello!!」とだけ記載されているテキストファイル

のようにした場合、fileReadTest.htmlのJavaScript部では

// ブラウザがIEか判定.
function checkBrowserIE() {
    var userAgent  = window.navigator.userAgent.toLowerCase();

    if (userAgent.indexOf('msie') != -1) {
        return true;
    } else if (userAgent.indexOf('trident/7') != -1) {
        return true;
    }
    return false;
}

function readFileToString(fileName) {
    // ファイル読み込み用.
    var xmlHttp;
    if (checkBrowserIE()) {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else {
        xmlHttp = null;
    }
    if (xmlHttp == null) return "";

    // fileNameのテキストファイルを読み込み（同期）.
    var str = "";
    try {
        xmlHttp.open("GET", fileName, false);
        xmlHttp.send(null);
        str = xmlHttp.responseText;
    } catch(e) {
        window.alert(e);
    }

    return str;
}

IEとその他のブラウザで取得方向が少し異なります。ブラウザの判定は「ブラウザの種類を判定」を参照。

IEの場合は「xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");」で取得したものよりファイル読み込みをしないと「xmlHttp.open」で「アクセスが拒否されました」となりました。

それ以外では「XMLHttpRequest」でOK。であるので、IEとその他のブラウザで処理を変えてます。

xmlHttp.open("GET", fileName, false);
xmlHttp.send(null);
str = xmlHttp.responseText;

で、fileNameに指定されたテキストファイルを読み込みます。openの第二引数がファイル名、第三引数がfalseの場合は同期での取得（ファイルが読み込まれるまで待つ）。

sendを呼ぶとファイル読み込みを開始。xmlHttp.responseTextに結果のテキストが返されます。

var str = readFileToString('./hello.txt');

のようにしてファイルのテキストを取得できます。

非同期での読み込みは、

xmlHttp.onreadystatechange = function() {
  // xmlHttp.readyStateが4の場合は読み込み完了.
  // http以外の場合は、xmlHttp.statusが0になる.
  if (xmlHttp.readyState == 4 && (xmlHttp.status == 200 || xmlHttp.status == 0)) {
    window.alert(xmlHttp.responseText);
  }
}

のような記述をopenよりも前で記載し、openの第三引数はtrueにします。

xmlHttp.open("GET", fileName, true);
xmlHttp.send(null);

send後はすぐに次の処理に移行します。onreadystatechangeで指定した関数内にて、ファイルの読み込みが完了次第情報が返ります。

最終更新時間：2014年06月25日 13時23分44秒