web-dev-qa-db-fra.com

paramètre n'est pas de type 'Blob'

J'ai écrit le code ci-dessous pour afficher le texte d'un fichier local à l'aide de l'API de fichier, mais lorsque je clique sur le bouton, rien ne se passe. Je reçois le message d'erreur suivant lorsque j'inspecte l'élément dans le navigateur. Qu'est-ce que je fais mal?

Uncaught TypeError: Impossible d'exécuter 'readAsText' sur 'FileReader': le paramètre 1 n'est pas de type '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>

javascripthtmlhtml5fileapi
12
user3293692

Pour enregistrer le contenu du fichier dans innerHtml, vous devez d'abord lire le fichier. L'événement loadend ne se déclenche que lorsque le fichier est entièrement lu et vous pouvez accéder à son contenu sans erreur:

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

Vous pouvez en lire plus ici - et ici

1
Andrew Evt

Vous avez commis quelques erreurs.

Celui dont le message d'erreur se plaint est que vous essayez de sélectionner un fichier en utilisant une chaîne codée en dur. Vous ne pouvez pas déterminer quel fichier est chargé . L'API de fichier ne vous permettra de lire que les fichiers sélectionnés par l'utilisateur via une entrée de fichier.

Deuxièmement, vous essayez de lire la propriété result du lecteur avant que vous avez lu le fichier. Vous avez besoin d'un gestionnaire d'événements pour le faire (car la lecture de fichier, comme Ajax, est asynchrone). 

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

Comme les autres l'ont dit, j'ai remarqué que l'événement onload manquait.

J'ai donc deux façons différentes de montrer au lecteur comment faire quelque chose, un pour utiliser la variable readAsText et l'autre pour obtenir les données sous la forme d'une chaîne sur 64 octets en utilisant readAsDataURL avoir à vous soucier de Unicode et d'autres étranges caractères de point d'interrogation. Pour les voir en action, il suffit de basculer l'appel dans l'écouteur entre uploadFile(); et uploadFile1();. Et je montre de différentes manières que vous pouvez saisir l'objet fichier, ainsi:

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>

Et normalement, je pense que vous devriez être capable de faire:

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

au lieu d'avoir à ajouter cet auditeur, mais cela ne fonctionnait pas dans JSFiddle pour une raison quelconque.

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

1
vapcguy