JavaScript でローカルテキストファイルを開く

Mehvish Ashiq 2023年10月12日
  1. JavaScript FileReader() を使用してローカルテキストファイルを開く
  2. JavaScript FileReader() および jQuery を使用してローカルテキストファイルを開く
  3. JavaScript の PromiseFileReader を使用してローカルテキストファイルを開く
JavaScript でローカルテキストファイルを開く

この記事の目的は、JavaScript を使用してローカルテキストファイルを開くために使用できるさまざまな手法と方法について説明することです。また、FileReader()Promise、およびさまざまな jQuery 関数とイベントを使用して、システムからテキストファイルを読み取る方法についても説明します。

JavaScript FileReader() を使用してローカルテキストファイルを開く

HTML コード:

<!DOCTYPE html>
<html>
    <head>
        <title>Read Text File</title>
    </head>
    <body>
        <input id='selectedfile' type='text' name='selectedfile'>
        <input id='inputfile' type='file' name='inputfile' onChange='showSelectedFile()'>
        <br><br>
        <pre id="output"></pre>
    
    </body>
</html>

CSS コード:

input[type=file]{
    width:90px;
    color:transparent;
}

JavaScript コード:

function showSelectedFile() {
  selectedfile.value = document.getElementById('inputfile').value;
}
document.getElementById('inputfile').addEventListener('change', function() {
  var fr = new FileReader();
  fr.onload = function() {
    document.getElementById('output').textContent = fr.result;
  } fr.readAsText(this.files[0]);
})

出力:

javascript を使用してローカルテキストファイルを開く-ファイルリーダーを使用してローカルテキストファイル

このコードは、選択したファイル(入力ファイル)の内容を、入力ファイルに書き込まれているのと同じように出力します。

showSelectedFile() メソッドは、入力ファイルのパスを表示します。次に、id の値が inputfile である要素が選択されます。

イベントリスナーは、変更について input をリッスンします。ここでは、ファイルを選択すると変更されます。

変更されるとすぐに、無名関数が実行され、FileReader() コンストラクターを使用して FileReader オブジェクトが作成され、fr という名前が付けられます。fr を使用すると、FileReader() のさまざまな関数や属性にアクセスできます。この関数は、テキストコンテンツを読み取り、ブラウザに表示します。

.onload は、特定の機能を起動するために使用されます。この場合、この関数は id を持つ最初の要素を output として選択し、その .textContent プロパティに値 .result を設定します。

.textContent は、現在の要素(ノード)とその子孫要素のコンテンツを読み取ります。.readAsText() は、指定された入力ファイルの内容を読み取ります。すべてのコンテンツを読み取ると、result 属性にはこのコンテンツが文字列として含まれます。

FileList は、input 要素の files プロパティによって返されます。この例では、this がインデックスゼロ(this.files[0])のファイルオブジェクトを返す input 要素であると想定されています。

JavaScript FileReader() および jQuery を使用してローカルテキストファイルを開く

HTML コード:

<!DOCTYPE html>
<html>
    <head>
        <title>Read Text File</title>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    </head>
    <body>
          <input type="file" name="inputfile" id="inputfile">
          <br><br>
        <pre id="output"></pre>
    </body>
</html>

JavaScript コード:

$(document).ready(function() {
  $('#inputfile').change(function() {
    var file = this.files[0];
    var fr = new FileReader();
    fr.onload = function(data) {
      $('#output').html(data.target.result);
    } fr.readAsText(file);
  });
});

出力:

Hey,
Are you learning about how to open a local text file using JavaScript?

このサンプルコードは、ファイル(入力ファイル)に書き込まれる入力ファイルのコンテンツも出力します。

ready() イベントは、ドキュメントオブジェクトモデル(DOM)が完全にロードされたときにトリガーされます。わかりやすくするために、ドキュメントの読み込み後にメソッドにアクセスできるようになると言えます。

change() イベントは、要素の値が変更されたかどうかを知るために使用されます。change() イベントは、inputtextarea、および select 要素でのみ使用できます。change() イベントをトリガーするか、change() イベントで関数を実行することができます。

.html() は、選択した要素の innerHTML(コンテンツ)を返したり設定したりする場合に非常に便利です。

さて、あなたは innerHTML がどのように変更されているかについて考えるかもしれませんか?これは、FileReaderresult 属性をターゲットにしているためです。

次のスクリーンショットをご覧ください(オレンジ色で概説)。

javascript を使用してローカルテキストファイルを開く-jquery を使用してローカルテキストファイルデータ

.onload.result.readAsText() については、前のセクションですでに説明しています。そこに行って見てみるか、このリンクをチェックして詳細を読むことができます。

ファイルシステムを使用して、ローカルテキストファイルを読み取ることができます(ノード環境でコーディングしている場合)。

JavaScript の PromiseFileReader を使用してローカルテキストファイルを開く

HTML コード:

<!DOCTYPE html>
<html>
    <head>
        <title>Read Text File</title>
    </head>
    <body>
          <input type="file" onchange="readInputFile(this)"/>
        <h3>File Content:</h3>
        <pre id="output"></pre>
        
    </body>
    
</html>

JavaScript コード:

function readFile(file) {
  return new Promise((resolve, reject) => {
    let freader = new FileReader();
    freader.onload = x => resolve(freader.result);
    freader.readAsText(file);
  })
}

async function readInputFile(input) {
  output.innerText = await readFile(input.files[0]);
}

出力:

Hey,
Are you learning about how to open a local text file using JavaScript?

このサンプルコードでは、入力ファイルが選択されるとすぐに関数 readInputFile() が実行されます。この関数は、Promise が実行されるのを(await 演算子を使用して)待機し、期待値(解決された場合)を返します。

さらに、ID が output の要素のコンテンツ(innerHTML)は、Promise によって返される値に置き換えられます。await 演算子は、Promise を待機するために使用されます。これは、非同期関数の合格または不合格とそれぞれの値を表すオブジェクトです。resolverejectpending という 3つの状態があります。

著者: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

関連記事 - JavaScript File