web-dev-qa-db-de.com

parameter ist nicht vom Typ 'Blob'

Ich habe den folgenden Code geschrieben, um den Text aus einer lokalen Datei mithilfe der Datei-API anzuzeigen. Wenn ich jedoch auf die Schaltfläche klicke, geschieht nichts. Ich erhalte die folgende Fehlermeldung, wenn ich das Element im Browser inspiziere. Was mache ich falsch?

Nicht gefundener TypeError: Fehler beim Ausführen von 'readAsText' für 'FileReader': Parameter 1 hat nicht den Typ 'Blob'.

<!DOCTYPE html>
    <html>
    <body>

    <p>This example uses the addEventListener() method to attach a click event to a button.</p>

    <button id="myBtn">Try it</button>
    <pre id="file"></pre>

    <script>
    document.getElementById("myBtn").addEventListener("click", function(){
       var file = "test.txt"
       var reader = new FileReader();

       document.getElementById('file').innerText = reader.result;
   
       reader.readAsText(file);

    });
    </script>

    </body>
    </html>

12
user3293692

Um den Dateiinhalt in innerHtml zu speichern, müssen Sie zuerst die Datei lesen. Das loadend -Ereignis wird nur ausgelöst, wenn die Datei vollständig gelesen wurde und Sie ohne Fehler auf den Inhalt zugreifen können:

var reader = new FileReader();
var fileToRead = document.querySelector('input').files[0];

// attach event, that will be fired, when read is end
reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array
   // we insert content of file in DOM here
   document.getElementById('file').innerText = reader.result;
});

// start reading a loaded file
reader.readAsText(fileToRead);

Lesen Sie mehr hier - und hier

1
Andrew Evt

Sie haben ein paar Fehler gemacht.

Die Fehlermeldung ist, dass Sie versuchen, eine Datei mit einer hart codierten Zeichenfolge auszuwählen. Sie können nicht bestimmen, welche Datei geladen wird . Mit der Datei-API können Sie nur Dateien lesen, die vom Benutzer ausgewählt über eine Dateieingabe sind.

Die zweite ist, dass Sie versuchen, die result-Eigenschaft des Readers vorher zu lesen, in dem Sie die Datei gelesen haben. Dazu benötigen Sie einen Event-Handler (weil das Lesen von Dateien wie Ajax asynchron ist). 

document.getElementById("myBtn").addEventListener("click", function() {

  var reader = new FileReader();
  reader.addEventListener('load', function() {
    document.getElementById('file').innerText = this.result;
  });
  reader.readAsText(document.querySelector('input').files[0]);

});
<input type="file">
<button id="myBtn">Try it</button>
<pre id="file"></pre>

14
Quentin

Wie die anderen sagten, fiel mir auf, dass das Onload-Ereignis fehlt.

Ich habe also verschiedene Möglichkeiten, um zu zeigen, wie der Leser etwas tun kann, eine für readAsText und eine für das Abrufen der Daten als Base64-Bytezeichenfolge mithilfe von readAsDataURL müssen sich um Unicode und andere seltsame Fragezeichen-Zeichen sorgen. Um sie in Aktion zu sehen, blättern Sie einfach den Anruf im Listener zwischen uploadFile(); und uploadFile1();. Und ich zeige ein paar verschiedene Möglichkeiten, wie Sie das Dateiobjekt greifen können:

document.getElementById("myBtn").addEventListener("click", function() {
  uploadFile1();
}); 

function uploadFile1(){
  var f = myInput.files[0];
  var reader = new FileReader();
  reader.onload = processFile(f);
  reader.readAsText(f); 
}

function uploadFile(){
  var f = document.querySelector('input').files[0];
  var reader = new FileReader();
  reader.onload = processFile(f);
  reader.readAsDataURL(f); 
}

function processFile(theFile){
  return function(e) { 
    // Use the .split I've included when calling this from uploadFile()
    var theBytes = e.target.result; //.split('base64,')[1]; 
    document.getElementById('file').innerText = theBytes;
  }
}
<input id="myInput" type="file">    
<button id="myBtn">Try it</button>
<span id="file"></span>

Normalerweise würde ich denken, Sie sollten es einfach tun können:

<input type="button" onclick="uploadFile()" id="myBtn">Try it</button>

anstatt diesen Listener hinzufügen zu müssen, funktionierte er aus irgendeinem Grund nicht in JSFiddle.

https://jsfiddle.net/navyjax2/heLmxegn/1/

1
vapcguy