Получение текста из файла с помощью FileReader при загрузке - PullRequest
Новая
       31

Получение текста из файла с помощью FileReader при загрузке

1 голос
/ 09 марта 2019

Итак, я работал над страницей, которая использует только локальные файлы (к сожалению, сервер не подходит. Даже не localhost. Борьба реальна.) И я пришел к ситуации, когда мне нужно взять текст из файла .csv и заполнить его на странице. У меня есть этот фрагмент кода, который работает, но мне нужно, чтобы файл был установлен внутри функции при нажатии кнопки. Поиск файла вручную - не вариант (чтобы визуализировать то, что я делаю, я делаю макетный файл базы данных самым раздражающим способом из возможных (потому что мне нужно, а не потому, что я хочу)).

На странице у меня было бы что-то вроде: 

<button id="myButton" onclick="getText()"></button>

<script>
var myFile = "dataset.csv";
...
</script>

Следующий бит кода работает (в отношении того, чтобы он извлекал данные из файла CSV), но, как я уже сказал, мне нужно извлечь текст из файла при нажатии кнопки и просто иметь имя файла установить в сценарии, не поднимая его вручную. 

<!DOCTYPE html>
<html>
   <body>
      <input type="file" id="fileinput" />
      <div id="outputdiv"></div>
      <script type="text/javascript">
           function readSingleFile(evt) {
             var f = evt.target.files[0]; 
             if (f) {
               var r = new FileReader();
               r.onload = function(e) { 
                  var contents = e.target.result;
                      var splited = contents.split(/\r\n|\n|\r|,/g);
                      for (i=0; i<splited.length; i++){
                         document.getElementById("outputdiv").innerHTML = document.getElementById("outputdiv").innerHTML + splited[i] + "<br>";
                      }     
                     }
               r.readAsText(f);
             } else { 
               alert("Failed to load file");
             }         
           }
           document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
      </script>
   </body>
</html>

Из того, что я могу сказать из API, мне нужно было бы установить атрибуты файла для большого двоичного объекта, чтобы передать его в FileReader. Как я могу сделать это без использования поля ввода, я понятия не имею. Также есть 50% -ная вероятность того, что я совершенно неправ в этом, поскольку, очевидно, я не знаю, как это сделать.

Если бы кто-то мог показать мне, как добиться этого в отношении того, что я ищу, это было бы очень признательно. Я в полном замешательстве.

Спасибо.

1 Ответ

1 голос
/ 09 марта 2019

Примечание. Ограничения CORS не позволяют работать в большинстве браузеров. Вы можете использовать FireFox Developer Edition, который отключает проверку CORS.

Вы можете использовать XMLHttpRequest для загрузки локального файла: 

<!DOCTYPE html>
<html>
   <body>
      <button onclick="readSingleFile()">Click Me</button>
      <div id="outputdiv"></div>
      <script type="text/javascript">
         function readSingleFile() {
            let xhr = new XMLHttpRequest();
            let url = "relative/path/to/file.txt;
            if (!url) return;
            xhr.onload = dataLoaded;
            xhr.onerror = _ => "There was an error loading the file.";
            xhr.overrideMimeType("text/plain");
            xhr.open("GET",url);
            xhr.send();
          }

          function dataLoaded(e){
            var contents = e.target.responseText;
            var splited = contents.split(/\r\n|\n|\r|,/g);
            for (i=0; i<splited.length; i++){
              document.getElementById("outputdiv").innerHTML = document.getElementById("outputdiv").innerHTML + splited[i] + "<br>";
            }
      </script>
   </body>
</html>
...