2012-12-04 26 views
31

Ich versuche, eine Textdatei in meine JavaScript-Datei zu laden und dann die Zeilen aus dieser Datei zu lesen, um Informationen zu erhalten, und ich habe den FileReader versucht, aber es scheint nicht zu funktionieren. Kann jemand helfen?Wie lese ich Textdatei in JavaScript

function analyze(){ 
    var f = new FileReader(); 

    f.onloadend = function(){ 
     console.log("success"); 
    } 
    f.readAsText("cities.txt"); 
} 
+3

Lesen: http://www.html5rocks.com/en/tutorials/file/dndfiles/. Wenn es sich um eine lokale Datei handelt, muss der Benutzer die Datei aus Sicherheitsgründen selbst auswählen. Related: http://stackoverflow.com/questions/13428532/using-a-local-file-as-a-data-source-in-javascript – NullUserException

Antwort

41

Ja, es ist möglich, mit Filereader, ich habe bereits ein Beispiel dafür getan, hier ist der Code:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Read File (via User Input selection)</title> 
    <script type="text/javascript"> 
    var reader; //GLOBAL File Reader object for demo purpose only 

    /** 
    * Check for the various File API support. 
    */ 
    function checkFileAPI() { 
     if (window.File && window.FileReader && window.FileList && window.Blob) { 
      reader = new FileReader(); 
      return true; 
     } else { 
      alert('The File APIs are not fully supported by your browser. Fallback required.'); 
      return false; 
     } 
    } 

    /** 
    * read text input 
    */ 
    function readText(filePath) { 
     var output = ""; //placeholder for text output 
     if(filePath.files && filePath.files[0]) {   
      reader.onload = function (e) { 
       output = e.target.result; 
       displayContents(output); 
      };//end onload() 
      reader.readAsText(filePath.files[0]); 
     }//end if html5 filelist support 
     else if(ActiveXObject && filePath) { //fallback to IE 6-8 support via ActiveX 
      try { 
       reader = new ActiveXObject("Scripting.FileSystemObject"); 
       var file = reader.OpenTextFile(filePath, 1); //ActiveX File Object 
       output = file.ReadAll(); //text contents of file 
       file.Close(); //close file "input stream" 
       displayContents(output); 
      } catch (e) { 
       if (e.number == -2146827859) { 
        alert('Unable to access local files due to browser security settings. ' + 
        'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' + 
        'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"'); 
       } 
      }  
     } 
     else { //this is where you could fallback to Java Applet, Flash or similar 
      return false; 
     }  
     return true; 
    } 

    /** 
    * display content using a basic HTML replacement 
    */ 
    function displayContents(txt) { 
     var el = document.getElementById('main'); 
     el.innerHTML = txt; //display output in DOM 
    } 
</script> 
</head> 
<body onload="checkFileAPI();"> 
    <div id="container">  
     <input type="file" onchange='readText(this)' /> 
     <br/> 
     <hr/> 
     <h3>Contents of the Text file:</h3> 
     <div id="main"> 
      ... 
     </div> 
    </div> 
</body> 
</html> 

Es ist auch möglich, das Gleiche zu tun, einige ältere Versionen von IE zu unterstützen (ich glaube 6 -8) mit dem ActiveX-Objekt, hatte ich einige alte Code, der das auch tut, aber ist eine Weile, so dass ich es ausgraben muss Ich habe eine Lösung ähnlich der, die ich mit freundlicher Genehmigung von Jacky Cui's blog und bearbeitet diese Antwort (auch Code etwas aufgeräumt). Ich hoffe es hilft.

Zum Schluss lese ich noch einige andere Antworten, die mich bei der Verlosung schlagen, aber wie sie vorschlagen, suchen Sie möglicherweise nach Code, mit dem Sie eine Textdatei vom Server (oder Gerät) laden können, in dem sich die JavaScript-Datei befindet . Wenn das der Fall ist, dann wollen Sie AJAX-Code das Dokument dynamisch zu laden, die etwas sein würde, wie folgt:

<!DOCTYPE html> 
<html> 
<head><meta charset="utf-8" /> 
<title>Read File (via AJAX)</title> 
<script type="text/javascript"> 
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP'); 

function loadFile() { 
    reader.open('get', 'test.txt', true); 
    reader.onreadystatechange = displayContents; 
    reader.send(null); 
} 

function displayContents() { 
    if(reader.readyState==4) { 
     var el = document.getElementById('main'); 
     el.innerHTML = reader.responseText; 
    } 
} 

</script> 
</head> 
<body> 
<div id="container"> 
    <input type="button" value="test.txt" onclick="loadFile()" /> 
    <div id="main"> 
    </div> 
</div> 
</body> 
</html> 
+0

Danke für die Post! Es gibt jedoch etwas, was ich nicht verstehe: Warum wird nicht 'reader' oder' this' anstelle von 'e.target' verwendet, während sie sich alle auf das' FileReader'-Objekt beziehen: ** [demo] (http: // jsfiddle.net/Mori/tJBHZ/)**. – Mori

+0

Für "dieses" Schlüsselwort, wirklich nur eine persönliche Vorliebe Sache, es sei denn, es ist inline auf ein Element, das ich nicht viel damit beschäftige ... http://tech.pro/tutorial/1192/avoiding-the-this-problem -in-javascript Wie für "Leser", ja, das ist ein gültiger Punkt könnte es sein, aber wieder, lieber nicht ein Element in einer Weise verwenden, die verwirrend "liest". Wenn es mehrere Möglichkeiten gibt, sich auf ein Objekt zu beziehen, würde ich sagen, dass Sie für das Objekt, mit dem Sie am liebsten später lesen, zuständig sind. – bcmoney

9

Javascript hat aus Sicherheitsgründen keinen Zugriff auf das Dateisystem des Benutzers. FileReader ist nur für Dateien, die manuell vom Benutzer ausgewählt werden.

+2

Dies ist davon ausgegangen, dass OP über eine Datei auf dem Client-Computer spricht. Wenn etwas auf dem Server verfügbar ist, kann es über AJAX geladen werden. –

10

Dies kann sehr leicht JavaScript XMLHttpRequest() Klasse (AJAX) unter Verwendung erfolgen:

function FileHelper() 

{ 
    FileHelper.readStringFromFileAtPath = function(pathOfFileToReadFrom) 
    { 
     var request = new XMLHttpRequest(); 
     request.open("GET", pathOfFileToReadFrom, false); 
     request.send(null); 
     var returnValue = request.responseText; 

     return returnValue; 
    } 
} 

... 

var text = FileHelper.readStringFromFileAtPath ("mytext.txt"); 
+1

hat nicht für mich funktioniert – Daniel

2

mein Beispiel

<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
    </head> 
    <body> 
     <script> 
      function PreviewText() { 
      var oFReader = new FileReader(); 
      oFReader.readAsDataURL(document.getElementById("uploadText").files[0]); 
      oFReader.onload = function (oFREvent) { 
       document.getElementById("uploadTextValue").value = oFREvent.target.result; 
       document.getElementById("obj").data = oFREvent.target.result; 
      }; 
     }; 
     jQuery(document).ready(function(){ 
      $('#viewSource').click(function() 
      { 
       var text = $('#uploadTextValue').val(); 
       alert(text); 
       //here ajax 
      }); 
     }); 
     </script> 
     <object width="100%" height="400" data="" id="obj"></object> 
     <div> 
      <input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" /> 
      <input id="uploadText" style="width:120px" type="file" size="10" onchange="PreviewText();" /> 
     </div> 
     <a href="#" id="viewSource">Source file</a> 
    </body> 
</html> 
Verwandte Themen