TEXT読み込み

2023-08-092024-10-22

↓↓↓ スライドできます ↓↓↓

[metaslider id=”1967″]

TEXTファイルから値を取得するためには、JavaScriptでファイルを読み込む必要があります。ウェブブラウザ環境では、File APIを使用してファイルを読み込むことができます。以下に、TEXTファイルから値を取得するコード例を示します。

このコードも、テキストファイルを読み込んでその内容を表示する簡単な例です。CSVファイルの例と同様に、FileReaderを使用してファイルを読み込んでいますが、CSVファイルと異なり、テキストファイルの場合は行ごとに分割する必要はありません。

HTMLファイルでは、<input type="file">要素を使用してテキストファイルを選択するインターフェースを提供し、読み込むボタンと結果表示用の<div>要素を用意しています。
JavaScriptファイルでは、ファイルが選択されたときにFileReaderを使用してファイルを読み込み、読み込まれたテキスト内容を表示します。

このコードは、ブラウザ環境で動作します。Node.js環境でのファイル読み込みは異なるアプローチが必要となるため、注意が必要です。また、実際のアプリケーションではエラーハンドリングやセキュリティ対策を適切に考慮することが重要です。

CopyCode


    <!DOCTYPE html>

    <html>

    <head>

        <title>Text File Reading Example</title>

    </head>

    <body>

        <input type="file" id="textFileInput">

        <button id="loadButton">Load Text File</button>
    
        <div id="output"></div>
    
        <script src="script.js"></script>

    </body>

    </html>


　（今回は空ファイルです。）


    document.addEventListener("DOMContentLoaded", function() {

        var textFileInput = document.getElementById("textFileInput");

        var loadButton = document.getElementById("loadButton");

        var outputDiv = document.getElementById("output");
    
        loadButton.addEventListener("click", function() {

            var file = textFileInput.files[0];
    
            if (file) {
                var reader = new FileReader();
    
                reader.onload = function(e) {

                    var contents = e.target.result;
                    outputDiv.textContent = contents;
                    
                };
    
                reader.readAsText(file);
            }
        });
    });

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

TEXT読み込み

関連記事