JavaScript でローカルテキストファイルを開く
-
JavaScript
FileReader()を使用してローカルテキストファイルを開く -
JavaScript
FileReader()およびjQueryを使用してローカルテキストファイルを開く -
JavaScript の
PromiseとFileReaderを使用してローカルテキストファイルを開く
この記事の目的は、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]);
})
出力：
このコードは、選択したファイル（入力ファイル）の内容を、入力ファイルに書き込まれているのと同じように出力します。
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() イベントは、input、textarea、および select 要素でのみ使用できます。change() イベントをトリガーするか、change() イベントで関数を実行することができます。
.html() は、選択した要素の innerHTML（コンテンツ）を返したり設定したりする場合に非常に便利です。
さて、あなたは innerHTML がどのように変更されているかについて考えるかもしれませんか？これは、FileReader の result 属性をターゲットにしているためです。
次のスクリーンショットをご覧ください（オレンジ色で概説）。
.onload、.result、.readAsText() については、前のセクションですでに説明しています。そこに行って見てみるか、このリンクをチェックして詳細を読むことができます。
ファイルシステムを使用して、ローカルテキストファイルを読み取ることができます（ノード環境でコーディングしている場合）。
JavaScript の Promise と FileReader を使用してローカルテキストファイルを開く
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 を待機するために使用されます。これは、非同期関数の合格または不合格とそれぞれの値を表すオブジェクトです。resolve、reject、pending という 3つの状態があります。
