ローカルファイルを読み込むAjaxの方法は何ですか

2年 ago
結衣, 春花
1 minute

Ajaxは元々リモートサーバーから非同期にデータを読み込む技術で、ローカルファイルに直接アクセスすることはできません。しかし、ローカルファイルにアクセスして、Ajaxでアップロードするなどの操作を行うには、HTML5 File APIを使用できます。

ローカルファイルを読み取るAjaxを実行するには、以下の手順を実行します。

  1. HTMLファイルにファイル選択インプットボックスを追加する：
<input type="file" id="fileInput">
  1. JavaScript の change イベントをファイル選択ボックスでリッスンして、選択されたファイルを読み込みます。
document.getElementById('fileInput').addEventListener('change', function(event) {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        var fileContent = e.target.result; // 读取到的文件内容
        // 在这里可以使用Ajax发送文件内容到服务器
    };
    reader.readAsText(file); // 以文本格式读取文件内容
});
  1. リーダー.ロード

Ajax ではセキュリティ上の理由からローカルファイルシステムのファイルパスを直接取得することはできないことに注意してください。上記の方法は、ユーザーが手動でファイルを選択して File API でファイル内容を読み取り、その後 Ajax でサーバーに送信するものです。

bannerAds