JavaScriptでローカルファイルを取得するサンプル - 都内SEのプログラミング勉強と雑記

JavaScriptでローカルファイルを取得する手軽な方法はないかな～、とぐぐってみました。

Webサーバを起動するのが一番だけど（令和のこの今も）ごく稀にネット環境がない状態で調査・解析することがあるので。

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="UTF-8">
   <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>

<body>
    <script>
       window.onload = function () {
           $.ajax({
               type: "get",
               url: "test.json",
               dataType: "json",
               success: function (data) {
                   let text = "data.hoge:" + data.hoge;
                   text += ", data.responseText:" + data.responseText;
                   alert(text);
               },
               error: function () { alert("失敗"); }
           });
       };
   </script>
</body>

</html>

//test.jsonの中身は以下 この行は含めない。
{
    "hoge": "fuga",
    "responseText": "URLです。"
}

このような html , json を同じフォルダに置いて

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files といった記載でローカルファイルへのアクセスを許可してChrome立ち上げると以下のように取得できます。

f:id:object1985:20210825114937p:plain

え？jQueryをCDNで使っている？そこはご愛敬・・・