2014-12-17 14 views
16

Ich habe einige der vorherigen Fragen zu diesem Thema gelesen, aber ich muss wirklich 100% sicher sein!Lesen Sie eine lokale Textdatei mit Javascript

Kann ich aus einer TXT-Datei auf meinem lokalen System lesen und in meinem HTML-BODY präsentieren?

Ich habe mehrere Funktionen ausprobiert, hier ist eine:

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

Der Inhalt der Datei einfach ist etwa 100 Wörter, die ich aus der Textdatei und Anzeige in meinem HTML-BODY lesen möchten.

Ist das möglich ohne meinen eigenen Server?

Antwort

30

können Sie ein verwenden FileReader Objekt Textdatei hier zu lesen ist Beispielcode:

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

Hier die codepen ist demo

Wenn Sie eine feste Datei haben Sie jedes Mal, wenn Ihr Anwendungslast lesen dann können diesen Code verwenden:

<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

Ist es möglich, die Option "Wählen Sie eine Datei" zu überspringen und stattdessen die zu lesende Datei in meinem Code zu definieren? Das ist genau das, was ich brauche. Nicht der Benutzer sollte die Datei wählen, aber ich sollte. –

+0

bearbeitet meine Antwort mit aktualisierten Code :) – Aminul

+0

Arbeitete! Danke vielmals! –

2

I wegen Sicherheitsbedenken es denken ist Es ist nicht möglich, die Datei vom lokalen Rechner (Client-Seite) ohne Client-Intervention zu lesen.

Ich habe folgende Code versucht, durch bereitgestellt 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> 

es wird der Zugriff verweigert Meldung geben, wie unten enter image description here

2

Hier finden Sie den Code gezeigt, dass die lokalen automatisch den Inhalt der txt erzeugt Datei und zeigen Sie es HTML. Viel Glück!

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