ajaxによるローカルファイルの読み込み

1年 ago
桜, 春樹
1 minute

AJAXでは、通常ローカルファイルを直接読み込むことはできません。これは、AJAXが HTTP プロトコルを使用してサーバーとデータのやり取りを行う技術であることが原因です。

ただし、次の2通りの方法でローカルファイルの読み込みが実現できます。

  1. HTML5 File APIを活用する：HTML5 File APIは、ブラウザ上でローカルファイルを読み込む仕組みを提供しています。input要素のtype属性をfileに指定したファイル選択ボックスで、ユーザーがローカルファイルを選択すると、FileReaderオブジェクトを用いてファイル内容を読み込むことが可能になります。
<input type="file" id="fileInput">
<script>
  var fileInput = document.getElementById("fileInput");
  fileInput.addEventListener("change", function(event) {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      var content = e.target.result;
      console.log(content);
    };
    reader.readAsText(file);
  });
</script>
  1. サーバを利用したファイルアップロード：ローカルに保存したファイルをサーバにアップロードし、AJAXリクエストでサーバのファイルを呼び出してファイル内容を取得します。
<input type="file" id="fileInput">
<button id="uploadButton">上传文件</button>
<script>
  var fileInput = document.getElementById("fileInput");
  var uploadButton = document.getElementById("uploadButton");
  uploadButton.addEventListener("click", function() {
    var file = fileInput.files[0];
    var formData = new FormData();
    formData.append("file", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload", true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var content = xhr.responseText;
        console.log(content);
      }
    };
    xhr.send(formData);
  });
</script>

ユーザーがファイルを選択して「ファイルをアップロード」ボタンをクリックすると、AJAXリクエストを使用してそのファイルがサーバー上の「/upload」インターフェイスに送信されます。サーバーはファイルを受け取ると、ファイルを処理して処理結果をフロントエンドに返します。フロントエンドはxhr.responseTextを使用してサーバーが返したファイルの内容を取得します。

bannerAds