gpt4 book ai didi

JavaScript - 使用 HTML5 FileReader 读取文件

转载 作者:行者123 更新时间:2023-11-29 16:02:42 29 4
gpt4 key购买 nike

我目前正在学习 JavaScript,我正在努力阅读一个 txt 文件并在程序中使用它的内容,我目前所拥有的:

fileBtn.addEventListener("change", function()
{
var content = [];
var file = fileBtn.files[0];
readFile(file, function(data)
{
console.log(JSON.parse(data));
//content.push(JSON.parse(data)) doesn't work, data is undef.
});

});

和一个函数 readFile

function readFile(file, f)
{
var reader = new FileReader();
reader.onload = function(evt)
{
f(evt.target.result);
};
reader.readAsText(file);
}

我的 txt 文件当前只包含一个“1”,它会将这个数字记录到控制台,但我无法使用它,如果我尝试将它插入数组,值突然未定义。我的目标是稍后在程序中使用该文件的内容

最佳答案

1 。如果文本文件仅包含 string ,则无需使用 JSON.parse 。data 包含所有文本文件内容

2。你需要输入 var content = [];全局而不是在函数 readFile 中

按照这段代码我认为它会解决你的问题


<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<label for="file-upload" class="custom-file-upload">
Custom Upload
</label>
<input id="file-upload" type="file" />
<input id="log-content" type="button" value="Click Me"/>

</body>



<script>
var content = [];

function readFile(file, f) {
var reader = new FileReader();
reader.onload = function (evt) {
f(evt.target.result);
};
var text = reader.readAsText(file);
}
var fileBtn = document.getElementById("file-upload");
var logContnt = document.getElementById("log-content");

logContnt.addEventListener("click", function () {
alert(content);
})
fileBtn.addEventListener("change", function () {
var file = fileBtn.files[0];
readFile(file, function (data) {
content.push(data);
});

});
</script>



</html>

enter image description here

关于JavaScript - 使用 HTML5 FileReader 读取文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50304587/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com