如何读取txt文件并将其保存在html中的javascript数组中 [英] How to read txt file and save it in array in javascript in html
问题描述
对此有很多解决方案，但我在 html 网页上的 javascript 中发现很少或没有.我有一个名为 sample.txt 的数据文件，位于我的 html 文件所在的位置.我的目标是将 txt 文件加载到可用于创建表格并显示在 html 文件上的数组中.我的 sample.text 文件包含以下数据:
There are many solution to to this but I found few or none in javascript on html webpage. I have a data file called sample.txt located where my html file is. My goal is to load txt file into the array that can be used to create a table and displayed on html file. My sample.text file has the following data:
sin 0.2 time 0.22222
cos 0.3 time 0.43434
tan 0.1 time 0.22221
我是 Javascript 的新手，我承认它比其他编程语言更难.我熟悉 node.js 模式下的 javascript，但不熟悉 html 模式.我设法创建了 html 网页(如下所示)并在脚本模式下显示文本和数字等基础知识.我还设法加载 txt 文件并在脚本模式下按下按钮后显示它.这个 txt 加载方法是唯一对我有用的方法.require (js) 方法不起作用或导入.如何从这种工作模式创建数据数组?
I am new to Javascript and I admit that it is more difficult than other programming languages. I am familiar with javascript in node.js mode but not in html mode. I managed to create html web page (as shown below) and display basics like text and numbers in script mode. I also managed to load txt file and display it after pressing a button in script mode. This txt load method was the only method that worked for me. require (js) method did not work nor import. How do I create data array from this working mode?
以下是我的完整代码(已更正)，
Below is my complete code (corrected),
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Read Text File</title>
</head>
<body>
<input type="file" name="inputfile"
id="inputfile">
<br>
<pre id="output"></pre>
<script>
var file = document.getElementById('inputfile');
file.addEventListener('change', () => {
var txtArr = [];
var fr = new FileReader();
fr.onload = function() {
// By lines
var lines = this.result.split('\n');
for (var line = 0; line < lines.length; line++) {
txtArr = [...txtArr, ...(lines[line].split(" "))];
}
}
fr.onloadend = function() {
console.log(txtArr);
document.getElementById('output').textContent=txtArr.join("");
document.getElementById("output").innerHTML = txtArr[1];
console.log(txtArr[1]);
}
fr.readAsText(file.files[0]);
})
</script>
</body>
</html>
推荐答案
使用FileReader，逐行获取字符串，然后将其拆分并合并到resultArr中，如下所示:
Using FileReader, get the string line by line and then split it and merge it into the resultArr as follows:
var file = document.getElementById('inputfile');
file.addEventListener('change', () => {
var txtArr = [];
var fr = new FileReader();
fr.onload = function() {
// By lines
var lines = this.result.split('\n');
for (var line = 0; line < lines.length; line++) {
txtArr = [...txtArr, ...(lines[line].split(" "))];
}
}
fr.onloadend = function() {
console.log(txtArr);
document.getElementById('output').textContent=txtArr.join("");
}
fr.readAsText(file.files[0]);
})<!DOCTYPE html>
<html>
<head>
<title>Read Text File</title>
</head>
<body>
<input type="file" name="inputfile"
id="inputfile">
<br>
<pre id="output"></pre>
</body>
</html> 这篇关于如何读取txt文件并将其保存在html中的javascript数组中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
