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

J'ai écrit le code ci-dessous pour afficher le texte à partir d'un fichier local en utilisant le fichier API, mais quand je clique sur le bouton, rien ne se passe. J'obtiens l'erreur suivante quand j'ai inspecter l'élément dans le navigateur. Ce que je fais mal?

Uncaught TypeError: Échec de l'exécution de 'readAsText' sur 'FileReader': paramètre 1 n'est pas de type "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

Enregistrer le contenu du Fichier dans innerHtml, vous devez d'abord lire le fichier. loadend événement se déclenche uniquement lorsque le fichier est lu entièrement, et vous pouvez accéder à son contenu sans erreurs:

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

Qui va à l'erreur, car blob est pas défini.
Que faire si on veut le lire dans une variable? Ne nous ont explicitement pour la déverser dans la innerText?

InformationsquelleAutor Andrew Evt

17

Vous avez fait quelques erreurs.

Celui que le message d'erreur est de se plaindre, c'est que vous essayez de sélectionner un fichier à l'aide d'une chaîne codée en dur. Vous ne pouvez pas identifier le fichier qui est chargé. Le Fichier API permet uniquement de lire les fichiers qui sont sélectionné par l'utilisateur par l'intermédiaire d'un Fichier d'entrée.

La deuxième, c'est que vous essayez de lire le result propriété du lecteur avant que vous venez de lire le fichier. Vous avez besoin d'un gestionnaire d'événement pour le faire (parce que la lecture du fichier, comme Ajax est asynchrone).

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

Comme les autres ont dit, j'ai remarqué que l'événement onload est ce qu'il manque.

Donc, j'ai un couple de différentes manières de montrer comment inciter le lecteur à faire quelque chose, un pour faire la readAsText et l'autre pour l'obtention de données comme un base64 chaîne d'octets à l'aide de readAsDataURL, ce qui est mieux, à mon avis, puisque vous n'avez pas à vous soucier de l'Unicode et d'autres étranges caractères d'interrogation. Pour les voir en action, il suffit de retourner l'appel à l'auditeur entre uploadFile(); et uploadFile1();. Et je montre un couple de façons différentes que vous pouvez obtenir le fichier d'objet, ainsi:

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>

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

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

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

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

InformationsquelleAutor vapcguy

Vous devez vous connecter pour publier un commentaire.