2014-12-17 52 views
16

Ho letto alcune delle domande precedenti su questo argomento, ma ho davvero bisogno di essere sicuro al 100%!Leggere un file di testo locale usando Javascript

È possibile leggere da un file .txt sul mio sistema locale e presentarlo nel mio HTML-BODY?

Ho provato diverse funzioni, qui è uno:

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

Il contenuto del file è semplicemente circa 100 parole voglio leggere dal file di testo e la visualizzazione nel mio HTML-corpo.

È possibile senza il mio server?

risposta

30

È possibile utilizzare un oggetto FileReader per leggere file di testo qui è il codice di esempio:

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

Ecco il codepen demo

Se si dispone di un file fisso per leggere ogni volta che il carico di applicazione allora si possibile utilizzare questo codice:

<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

È possibile saltare l'opzione "Seleziona un file" e definire il file da leggere nel mio codice? Questo è in realtà ciò di cui ho bisogno. Non l'utente dovrebbe scegliere il file, ma dovrei. –

+0

modificato la mia risposta con codice aggiornato :) – Aminul

+0

Ha funzionato! Molte grazie! –

2

penso a causa di sicurezza preoccupazione è non è possibile leggere il file dalla macchina locale (lato client) senza alcun intervento da parte del client.

Ho provato seguente codice fornito da 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> 

sta dando messaggio di accesso negato, come illustrato di seguito enter image description here

2

Di seguito riportiamo il codice che genera automaticamente il contenuto del txt locali file e visualizzalo html. In bocca al lupo!

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