2014-12-17 2 views
16

Я прочитал некоторые из предыдущих вопросов по этой теме, но мне действительно нужно быть на 100% уверенным!Прочтите локальный текстовый файл, используя Javascript

Можно ли прочитать файл .txt в моей локальной системе и представить его в своем HTML-BODY?

Я попробовал несколько функций, вот один:

function readFile (path) { 
    var fso = new ActiveXObject('Scripting.FileSystemObject'), 
     iStream=fso.OpenTextFile(path, 1, false); 
    while(!iStream.AtEndOfStream) { 
     document.body.innerHTML += iStream.ReadLine() + '<br/>'; 
    }   
    iStream.Close(); 
} 
readFile("testing.txt"); 

Содержание файла просто около 100 слов, которые я хочу прочитать из текстового файла и отображения в моем HTML-ТЕЛЕ.

Возможно ли это, если у меня нет собственного сервера?

ответ

30

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

<div id="page-wrapper"> 

     <h1>Text File Reader</h1> 
     <div> 
      Select a text file: 
      <input type="file" id="fileInput"> 
     </div> 
     <pre id="fileDisplayArea"><pre> 

    </div> 
<script> 
window.onload = function() { 
     var fileInput = document.getElementById('fileInput'); 
     var fileDisplayArea = document.getElementById('fileDisplayArea'); 

     fileInput.addEventListener('change', function(e) { 
      var file = fileInput.files[0]; 
      var textType = /text.*/; 

      if (file.type.match(textType)) { 
       var reader = new FileReader(); 

       reader.onload = function(e) { 
        fileDisplayArea.innerText = reader.result; 
       } 

       reader.readAsText(file);  
      } else { 
       fileDisplayArea.innerText = "File not supported!" 
      } 
     }); 
} 

</script> 

Вот это codepen demo

Если у вас есть фиксированный файл, чтобы читать каждый раз, когда ваша нагрузка приложения, то вы может использовать этот код:

<script> 
var fileDisplayArea = document.getElementById('fileDisplayArea'); 
function readTextFile(file) 
{ 
    var rawFile = new XMLHttpRequest(); 
    rawFile.open("GET", file, false); 
    rawFile.onreadystatechange = function() 
    { 
     if(rawFile.readyState === 4) 
     { 
      if(rawFile.status === 200 || rawFile.status == 0) 
      { 
       var allText = rawFile.responseText; 
       fileDisplayArea.innerText = allText 
      } 
     } 
    } 
    rawFile.send(null); 
} 

readTextFile("file:///C:/your/path/to/file.txt"); 
</script> 
+2

Возможно ли пропустить параметр «Выбрать файл» и определить файл для чтения в моем коде? Это на самом деле то, что мне нужно. Не пользователь должен выбрать файл, но должен. –

+0

отредактировал мой ответ с обновленным кодом :) – Aminul

+0

Работал! Большое спасибо! –

2

Я думаю в связи с проблемой безопасности это невозможно прочитать файл с локального компьютера (на стороне клиента) без вмешательства клиента.

Я попытался следующий код, предоставленный Аминул

<script> 
var fileDisplayArea = document.getElementById('fileDisplayArea'); 
function readTextFile(file) 
{ 
    var rawFile = new XMLHttpRequest(); 
    rawFile.open("GET", file, false); 
    rawFile.onreadystatechange = function() 
    { 
     if(rawFile.readyState === 4) 
     { 
      if(rawFile.status === 200 || rawFile.status == 0) 
      { 
       var allText = rawFile.responseText; 
       fileDisplayArea.innerText = allText 
      } 
     } 
    } 
    rawFile.send(null); 
} 

readTextFile("file:///C:/your/path/to/file.txt"); 
</script> 

он дает доступ сообщение об отказе, как показано ниже enter image description here

2

Здесь Вы можете найти код, который автоматически генерирует содержимое TXT местного файл и отобразить его html. Удачи!

<html> 
<head> 
    <meta charset="utf-8"> 
    <script type="text/javascript"> 

    var x; 
    if(navigator.appName.search('Microsoft')>-1) { x = new ActiveXObject('MSXML2.XMLHTTP'); } 
    else { x = new XMLHttpRequest(); } 

    function getdata() { 
    x.open('get', 'data1.txt', true); 
    x.onreadystatechange= showdata; 
    x.send(null); 
    } 

    function showdata() { 
    if(x.readyState==4) { 
     var el = document.getElementById('content'); 
     el.innerHTML = x.responseText; 
    } 
    } 

    </script> 
</head> 
<body onload="getdata();showdata();"> 

    <div id="content"></div> 

</body> 
</html>