parameter ist nicht vom Typ 'Blob'

Ich geschrieben habe, der code unten, um anzuzeigen, dass der text aus einer lokalen Datei mithilfe der Datei-API, aber wenn ich auf die Schaltfläche klicke, passiert nichts. Ich bekomme die folgende Fehlermeldung, wenn ich überprüfen Sie das element im browser. Was mache ich falsch?

Uncaught TypeError: Failed to execute 'readAsText' auf 'FileReader': parameter 1 ist nicht vom Typ 'Blob'.

HTML:

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

  • typeof file == "string" // true
InformationsquelleAutor user3293692 | 2015-11-25
  1. 3

    Speichern Sie die Datei Inhalt in innerHtml, müssen Sie zuerst die Datei Lesen. loadend event feuert nur, wenn die Datei vollständig gelesen, und Sie können den Zugriff auf Ihre Inhalte ohne Fehler:

    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

    • , Das wird Fehler, da blob ist nicht definiert.
    • Was ist, wenn man Lesen will, in eine variable? Tun wir ausdrücklich müssen dump es in den innerText?
    InformationsquelleAutor Andrew Evt
  2. 17

    Du hast ein paar Fehler.

    Die eine, die Fehlermeldung beschwert sich darüber, dass Sie versuchen, wählen Sie eine Datei unter Verwendung einer hart codierten string. Sie nicht bestimmen können, welche Datei geladen wird. Das File API erlaubt nur das Lesen von Dateien, die sind durch den Benutzer ausgewählt über ein File-input.

    Das zweite ist, dass Sie versuchen, Lesen Sie die result Eigentum der Leser vor Sie haben Lesen Sie die Datei. Sie müssen einen Ereignis-handler zu tun (weil die Datei zu Lesen, wie Ajax ist asynchron).

    JS:

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

});

    HTML:

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

    InformationsquelleAutor Quentin
  3. 1

    Als die anderen gesagt haben, habe ich gemerkt, dass das onload-Ereignis ist, was fehlt.

    Also ich habe ein paar verschiedene Möglichkeiten zeigen, wie man den Leser doch etwas, das man für das erledigen der readAsText und eine für das abrufen von Daten als base64-byte-Zeichenkette mit readAsDataURL, was besser ist, meiner Meinung nach, da Sie nicht haben, um sorgen über Unicode und andere komische Fragezeichen-Zeichen. Sehen Sie in Aktion, nur klappen Sie den Anruf in den Hörer zwischen uploadFile(); und uploadFile1();. Und ich zeige ein paar verschiedene Möglichkeiten, wie Sie greifen kann das file-Objekt, sowie:

    JS:

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

    HTML:

    <input id="myInput" type="file">    
<button id="myBtn">Try it</button>
<span id="file"></span>

    Und normalerweise würde ich denken, Sie sollten in der Lage sein, um genau das tun:

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

    statt dass Sie, die Zuhörer, aber es war nicht die Arbeit in JSFiddle für einige Grund.

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

    InformationsquelleAutor vapcguy
Schreibe einen Kommentar