如何使用FileReader将文本文件加载到JavaScript中？

发布于 2025-02-04 13:48:48 字数 400 浏览 3 评论 0原文

我试图将简单的文本文件加载到JavaScript中，不幸的是没有成功。我的代码是：

var my_text:any;
var my_file:File = new File([], "C:\\Users\\riki7\\Downloads\\classes.txt");
var reader = new FileReader();
reader.onload = function() {
  my_text = reader.result;
};
reader.readAsText(my_file);
alert(my_text);

在此代码运行后，我希望在弹出警报中看到class.txt文件内容，而是“未定义”。我的文件包含a，b，c。

有人知道我的问题吗？也许是文件（）构造函数的第一个参数？

原文

I'm trying to load simple text file in javascript, unfortunately with no success.
my code is:

var my_text:any;
var my_file:File = new File([], "C:\\Users\\riki7\\Downloads\\classes.txt");
var reader = new FileReader();
reader.onload = function() {
  my_text = reader.result;
};
reader.readAsText(my_file);
alert(my_text);

after this code runs, I would expect to see classes.txt file content in pop-up alert, instead I get 'undefined'.
my file contains a, b, c.

does anyone know what is my problem? maybe the first parameter for File() constructor?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帅哥哥的热头脑 2025-02-11 13:48:48

您必须使用html tag ＆lt; input type =“ file” id =“ input” /＆gt; < /code>，然后将事件侦听器挂

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

上

const reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);

在我想就是这样。
您可以在那里找到更多示例：

如果您需要使用内容看到更改，请只需将警报移动到回调函数中：

reader.onload = function() {
  my_text = reader.result;
  alert(my_text);
};

因为my_text在外面调用警报时还没有准备好。

You have to use html tag <input type="file" id="input" /> and then hung a event listener on it, like that

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

then after simply bypass your file into the FileReader

const reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);

And i guess that would be it.
You can find more examples there: https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications

Having your code where your alert runs upfront the callback function. If you need to see alter with the content, simply move your alert into the callback function:

reader.onload = function() {
  my_text = reader.result;
  alert(my_text);
};

because my_text is not ready when you call alert outside.

回复收藏 0 原文

白况 2025-02-11 13:48:48

<input type="file" id="selectedFile">
<p id="display"></p>
<script>
var fr = new FileReader();
let test;
document.getElementById('selectedFile').addEventListener('change', x);

    
function x() {
fr.onload = ()=>{
document.getElementById('display').innerText = fr.result;
test = fr.result;
alert(fr.result);


}
fr.readAsText(this.files[0]);
}   


</script>

<input type="file" id="selectedFile">
<p id="display"></p>
<script>
var fr = new FileReader();
let test;
document.getElementById('selectedFile').addEventListener('change', x);

    
function x() {
fr.onload = ()=>{
document.getElementById('display').innerText = fr.result;
test = fr.result;
alert(fr.result);


}
fr.readAsText(this.files[0]);
}   


</script>

回复收藏 0 原文

原来是傀儡 2025-02-11 13:48:48

<html>
    <head>
    <script>
      var fileReadEvent = function(event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          var text = reader.result;
          alert(text)
        };
      };
    </script>
    </head>
    <body>
    <input type='file' accept='text/plain' onchange='fileReadEvent(event)'><br>
    </body>
    </html>

<html>
    <head>
    <script>
      var fileReadEvent = function(event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          var text = reader.result;
          alert(text)
        };
      };
    </script>
    </head>
    <body>
    <input type='file' accept='text/plain' onchange='fileReadEvent(event)'><br>
    </body>
    </html>

回复收藏 0 原文

~没有更多了~