JavaScript - чтение файла с помощью HTML5 FileReader - PullRequest
Новая
       1

JavaScript - чтение файла с помощью HTML5 FileReader

0 голосов
/ 12 мая 2018

Я сейчас изучаю JavaScript, и я изо всех сил пытаюсь прочитать текстовый файл и использовать его содержимое в программе, что у меня есть: 

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 Ответ

0 голосов
/ 12 мая 2018

1.нет необходимости использовать 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...