Lesen einer text-Datei mithilfe von Javascript

Sollte der folgende code liest den Inhalt einer text-Datei im aktuellen Verzeichnis nach dem laden, und zeigt Sie auf der html-Seite. Ich habe versucht, das ändern von meinem selbst. Aber es gibt nicht eine Ausgabe. Gibt es ein einfacher Weg, um dieses Ergebnis mit einer anderen Methode? oder bitte helfen, herauszufinden, was ist falsch an diesem code?

<html>
        <head>
            <meta http-equiv='Content-type' content='text/html;charset=UTF-8' >
            <script>
    function startRead()
    {
      //obtain input element through DOM 

    var file = document.getElementById("\\file.txt").files[0]

      if(file)
        {
        getAsText(file);
      }
    }

    function getAsText(readFile)
    {
        var reader;
        try
        {
        reader = new FileReader();
        }catch(e)
        {
            document.getElementById('output').innerHTML = 
                "Error: seems File API is not supported on your browser";
          return;
      }

      //Read file into memory as UTF-8      
      reader.readAsText(readFile, "UTF-8");

      //Handle progress, success, and errors

      reader.onload = loaded;
      reader.onerror = errorHandler;
    }



    function loaded(evt)
    {
      //Obtain the read file data    
      var fileString = evt.target.result;
      document.getElementById('output').innerHTML = fileString;
    }

    function errorHandler(evt)
    {
      if(evt.target.error.code == evt.target.error.NOT_READABLE_ERR)
        {
        //The file could not be read
            document.getElementById('output').innerHTML = "Error reading file..."
      }
    }
    //Start reading file on load
    window.addEventListener("load", startRead() { }, false);

            </script>
        </head>

        <body>

            <pre>
                <code id="output">
                </code>
            </pre>
        </body>
    </html>

Da unten ist der code, die ich geändert, um den oben genannten code. Meine Absicht war. Als ich öffnen Sie die html-Datei, die es Lesen würden, die text-Datei im aktuellen Verzeichnis und den Inhalt anzuzeigen.

<html>
    <head>
        <meta http-equiv='Content-type' content='text/html;charset=UTF-8' >
        <script>
function startRead()
{
  //obtain input element through DOM 

var file = document.getElementById("file").files[0];

  if(file)
    {
    getAsText(file);
  }
}

function getAsText(readFile)
{
    var reader;
    try
    {
    reader = new FileReader();
    }catch(e)
    {
        document.getElementById('output').innerHTML = 
            "Error: seems File API is not supported on your browser";
      return;
  }

  //Read file into memory as UTF-8      
  reader.readAsText(readFile, "UTF-8");

  //Handle progress, success, and errors

  reader.onload = loaded;
  reader.onerror = errorHandler;
}



function loaded(evt)
{
  //Obtain the read file data    
  var fileString = evt.target.result;
  document.getElementById('output').innerHTML = fileString;
}

function errorHandler(evt)
{
  if(evt.target.error.code == evt.target.error.NOT_READABLE_ERR)
    {
    //The file could not be read
        document.getElementById('output').innerHTML = "Error reading file..."
  }
}
        </script>
    </head>

    <body>
        <input id="file" type="file" multiple onchange="startRead()">
        <pre>
            <code id="output">
            </code>
        </pre>
    </body>
</html>

Java hat nichts mit JavaScript
document.getElementById("\\file.txt") existiert nicht in Ihrem Dokument, so erhalten Sie eine Ausnahme aus, wenn Sie versuchen zu Lesen. Schauen Sie in Ihrem JavaScript-Konsole.
Dies tut document.getElementById("\\file.txt").files[0] erste Zeile jedes element. Ich denke nicht so. Was versuchst hier?
"load", startRead() { }, false ist ein syntax-Fehler, so dass Sie erhalten eine Ausnahme, wenn Sie versuchen, kompilieren, der code. Schauen Sie in Ihrem JavaScript-Konsole.
Ich habe das original-code. Das ist das, was ich geändert um diesen code zu erhalten. Meine Bedingung, die ich erwähnt habe, zusammen mit ihm. Was ich brauche, ist für das Skript zu Lesen die text-Datei auf laden und anzeigen der text-Inhalt.
Funktioniert das code-snippet unten arbeiten, im Gegensatz zu dem oben genannten?
ja man unten woks völlig in Ordnung. Die, die ich habe versucht, ändern für meine Anforderung ist der eine oben, das funktioniert nicht.
Es sollte funktionieren, wenn Sie möchten, ersetzen Sie window.addEventListener("load", startRead() { }, false); durch window.addEventListener("load", startRead);, wenn Sie möchten, schließen Sie die Datei-input-Feld mit der ID file und verwendet document.getElementById('file') statt ...\file....
Ich habe diese zu ändern. Es ist nicht geben eine Leistung. Ich denke, weil Sie nicht wissen, welche Datei zum Lesen aus, im nicht sicher. Ist es Weg angeben, oder codieren Sie einen Dateinamen oder Pfad, es wird also nur gelesen, dass.
Nein, das ist nicht möglich. Die Dateien sind zugänglich über die files Eigenschaft nur. Sie sollten zumindest ein FileList - Objekt beim setzen console.log(file.files[0]) im startRead - Funktion und ein Blick in die browser-Konsole. Ist es wirklich getElementById('file') und <input id="file" type="file"/>?
ist es zu schwierig, code der id="Datei" parameter so . Wenn ich laden Sie die html-Datei. Die text-Datei wird automatisch gelesen.?

InformationsquelleAutor Cobra | 2015-05-26

5

Versuchen dieses Schnipsel habe ich gerade versucht und es funktioniert :)!

Live-Demo (Mit Input-Datei)

JS:
```
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) {
            var content = reader.result;
            //Here the content has been read successfuly
            alert(content);
        }
        
        reader.readAsText(file);	
    } else {
        fileDisplayArea.innerText = "File not supported!"
    }
});
```
HTML:
```
<input type="file" id="fileInput">
```
Ohne Input-Datei

Funktion
```
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;
                        alert(allText);
                    }
                }
            }
            rawFile.send(null);
        }
```
Und um es zu testen
```
<a href="#" onclick="readTextFile(&quot;file:///C:/test.txt&quot;)"> Test </a>
```
Bemerken: ich habe es versucht, aber es funktioniert nur in firefox
- Ich bin neu in javascript. was soll ich als input-Datei-ID? ist es eine Datei-Pfad? Gibt es ein bestimmtes format?
- Ich habe einen link mit einer Live-Demo, schauen Sie doch einfach :)! @Cobra
- Ich habe es gerade ausprobiert, aber es ist nicht geben eine Ausgabe :/ @Assa
- Haben Sie versucht, die live-demo? Welchen browser verwenden Sie?
- ja ich habe es versucht, aber keine Ausgabe. Ich bin mit Mozilla Firefox version 37.0.1 und ich habe es gerade ausprobiert in chrome, als auch, Gleiches Ergebnis.
- Nun, es ist seltsam, weil es für mich funktioniert. Jemand anderes kann es ausprobieren?
- was ist die Ausgabe, die du bekommen? eine alert-box mit dem Inhalt der Datei?? können Sie einen Blick auf meine früheren code und sehen, ob es eine Möglichkeit bekommen, dass die Arbeit? @Assa
- Aktualisiert meine Antwort @Cobra
- das funktioniert völlig in Ordnung. Ich habe ein paar mehr Fragen, wenn Sie nichts dagegen haben. Ist es Weg, um den Inhalt anzuzeigen onload? ohne auf den link klicken?
- ja sicher, rufen Sie die Funktion auf <body onload="readTextFile(Pfad">, Marke beantwortet werden, wenn Sie nichts dagegen haben :)!
- ja, ich habe es nur danke. funktioniert wie ein Charme (y) 🙂
- Freude ist die meine :)! @Cobra
- Ich habe noch eine Frage. Gibt es Skript, könnte dies Speicherort der Datei automatisch und übergeben es an readTextFile(). Davon ausgehen, dass die text-Datei im aktuellen Verzeichnis, und Sie können vordefinieren der name der text-Datei als gut. <a href="#" onclick="readTextFile("file:///C:/test.txt")"> Test </a> @Assa
- Verwenden einer Variablen speichern den Namen der Datei! 🙂
- Ich schaffte es, um es herauszufinden, vielen Dank. Eine andere Frage, wenn Sie nichts dagegen haben. Sagen ich will, um mein Skript alle 60 Sekunden. Wie kann ich dies umgehen? @Assa
- einen Blick hier haben:)! w3schools.com/js/js_timing.asp
- Funktion sendData(data){ var request = new XMLHttpRequest(); request.open("POST", "inde.php", true); Anfrage.setRequestHeader("Content-type","text/plain;charset=UTF-8"); request.setRequestHeader("Content-length", data.Länge); request.send(Daten); } @Assa ich bin mit dieser Funktion buchen 'Daten' - text in eine php-Seite. es spielt keine Naht zu sein, die Arbeit zu machen. Ich will nur diese Daten werden im Klartext auf einer php-Seite. Könnten Sie mir eine php, die dies tun könnte? und sagen, wenn es etwas falsch in diesem js-code
InformationsquelleAutor Sid

HTML:

<html>

<head></head>

<body>

  <input type="file" id="openfile" />

  <br>
  <pre id="filecontents"></pre>
  <script type="text/javascript">
    document.getElementById("openfile").addEventListener('change', function() {
      var fr = new FileReader();
      fr.onload = function() {
        document.getElementById("filecontents").textContent = this.result;
      }
      fr.readAsText(this.files[0]);
    })
  </script>
</body>
</html>

dieser code funktioniert

    <script type="text/javascript">

     document.getElementById("openfile").addEventListener('change', function(){


            var fr= new FileReader();
            fr.onload= function(){

                        document.getElementById("readfile").textContent=this.result;

            }

            fr.readAsText(this.files[0]);


     })

    </script>

Es ist gut, fügen Sie eine live-demo

InformationsquelleAutor Ramlal S

<html>
  <head>
    <title>reading file</title>
   </head>
<body>

JS:

var input = document.getElementById("myFile");
var output = document.getElementById("output");

input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();
    
    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });
    
    reader.readAsBinaryString(myFile);
  }
});

HTML:

<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>

<input type="file" id="myFile">
<hr>
<!--<div style="width: 300px;height: 0px" id="output"></div>-->
<textarea style="width:500px;height: 400px" id="output"></textarea>

<script>
var input = document.getElementById("myFile");
var output = document.getElementById("output");

input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });

    reader.readAsBinaryString(myFile);
  }
});
</script>
  </body>
</html>

InformationsquelleAutor Poornachander K

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Live-Demo (Mit Input-Datei)

Ohne Input-Datei