2014-12-17 16 views
16

Przeczytałem niektóre z poprzednich pytań na ten temat, ale naprawdę muszę być w 100% pewien!Przeczytaj lokalny plik tekstowy za pomocą Javascriptu

Czy można odczytać z pliku .txt w moim systemie lokalnym i przedstawić go w moim Kodzie HTML?

Próbowałem kilka funkcji, tutaj jest jeden:

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"); 

Zawartość pliku jest po prostu około 100 słów chcę czytać z pliku tekstowego i wyświetlacz w moim HTML-Body.

Czy to możliwe bez posiadania własnego serwera?

Odpowiedz

30

Można użyć FileReader obiektu do odczytu pliku tekstowego Oto przykładowy kod:

<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> 

Oto codepen demo

Jeśli masz stałe pliku do odczytu za każdym razem, gdy obciążenie zastosowanie wtedy można użyć tego kodu:

<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

Czy można pominąć opcję "Wybierz plik" i zamiast tego zdefiniować plik do odczytu w moim kodzie? Właśnie tego potrzebuję. Nie użytkownik powinien wybrać plik, ale powinien. –

+0

zredagowałem moją odpowiedź ze zaktualizowanym kodem :) – Aminul

+0

Pracowałem! Wielkie dzięki! –

2

myślę powodu bezpieczeństwa koncernu jest nie można odczytać pliku z lokalnego komputera (po stronie klienta) bez interwencji klienta.

Próbowałem następujący kod dostarczonych przez Aminul

<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> 

to daje dostęp zabroniony komunikat, jak pokazano poniżej enter image description here

2

Poniżej znajduje się kod, który generuje automatycznie zawartość txt lokalnej plik i wyświetl go w html. Powodzenia!

<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>