javascript чтение из txt файла

382

21 апреля 2017, 21:02

Нужно считать данные их txt файла на javascript, откуда-бы не взял пример, у меня не работает:

function handleFileSelect(evt) { 
  var files = evt.target.files; // FileList object 
 
  // files is a FileList of File objects. List some properties. 
  var output = []; 
  for (var i = 0, f; f = files[i]; i++) { 
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', 
      f.size, ' bytes, last modified: ', 
      f.lastModifiedDate.toLocaleDateString(), '</li>'); 
  } 
  document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 
} 
 
document.getElementById('files').addEventListener('change', handleFileSelect, false);

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <script src="http://api-maps.yandex.ru/2.0/?load=package.standard,package.route&lang=ru-RU" type="text/javascript"></script> 
  <script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
</head> 
<script> 
</script> 
<body> 
  <input type="file" id="files" name="files[]" multiple /> 
  <output id="list"></output> 
</body> 
</html>

И даже тут он работает, а у меня ругается:

Uncaught TypeError: Cannot read property 'addEventListener' of null

Никак не могу понять, может кто-нибудь подскажет.

Answer 1

Есть подозрения, что у Вас JavaScript выполняется раньше, чем подгрузился HTML и построено DOM-дерево. Добавьте свой JavaScript-код внутрь блока:

document.addEventListener('DOMContentLoaded', function(){/*JS-код*/}

такой код аналогичен коду jQuery:

$(document).ready(function() {/*JS-код*/}

Код , включенный внутри этого блока будет работать только после того , как объектная модель страницы документа (DOM) будет готова для выполнения JavaScript-кода.

Вот таким должен стать Ваш код:

document.addEventListener("DOMContentLoaded", function(event) {  
  function handleFileSelect(evt) { 
    var files = evt.target.files;  
    var output = []; 
    for (var i = 0, f; f = files[i]; i++) { 
      output.push('<li><strong>', escape(f.name), '</strong> (',f.type || 'n/a',') - ', 
        f.size, ' bytes, last modified: ', 
        f.lastModifiedDate.toLocaleDateString(), '</li>'); 
    } 
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 
  } 
 
  document.getElementById('files').addEventListener('change', handleFileSelect, false); 
});

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <script src="http://api-maps.yandex.ru/2.0/?load=package.standard,package.route&lang=ru-RU" type="text/javascript"></script> 
  <script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
</head> 
<script> 
</script> 
 
<body> 
  <input type="file" id="files" name="files[]" multiple /> 
  <output id="list"></output> 
</body> 
 
</html>

DOMContentLoaded – браузер полностью загрузил HTML, и построил DOM-дерево.