Comment lire fichier image à l'aide de la plaine du javascript?

Je suis nouveau sur le javascript et je suis actuellement en avoir un problème avec l'un de mes projets qui comprend l'affichage d'une image à partir du dossier racine du site web. Voici mon code actuel:

var reader = new FileReader();

    reader.onload = function(event){
           var dataUri = event.target.result,
               img = document.createElement("img");

               img.src =  dataUri;
               document.body.appendChild(img);
    };

    reader.onerror = function(event){
           console.log("File could not be read: " + event.target.error.code);
    };

reader.readAsDataURL("/uploads/extras/item_a/image1.png");

C'est mon code et il ne montre rien. Et dans ma console il me donne une erreur ou Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

N'importe quoi montrer dans la console?
GET data: net::ERR_INVALID_URL @NewToJS
Essayez /uploads/extras/item_a/image1.png ? Quelle est votre structure de dossier comme?
La console d'erreur est de dire que reader n'est pas heureux avec le url. Essayez de codage en dur le chemin d'accès complet vers le fichier que j'ai.e http://example.com/uploads/extras/item_a/image1.png pour écarter d'autres problèmes.
J'ai eu Failed to load resource: net::ERR_INVALID_URL @0019
L'erreur est très spécifique. nouveau Fichier a besoin d'au moins 2 arguments. Découvrez ce thread stackoverflow.com/questions/8390855/...
Qu'est-ce que newFile fonction ? Aussi, je soupçonne fortement cette fonction fonctionne de manière asynchrone, ce qui signifie que myfile sera pas défini, ou au moins pas le fichier que tu voulais. Enfin, si ce newFile ne retourner est un Fichier objet, ou un blob, utilisez URL.createObjectURL(myfile) au lieu d'un FileReader.
Je ne sais pas. Ce que si je supprime le var myfile? Que vais-je mettre dans mon reader.readAsDataURL(?);
Vous ne nous montrez pas ce qu'est cette newFile fonction donc on ne peut pas savoir ce qu'il attend, ni de quoi il en retourne. (si, pour quelque raison que ce soit, c'était une faute de frappe et que vous vouliez dire le new File() constructeur, il est alors absolument pas comment ça fonctionne, puisque ce conctructor besoins d'un objet Blob comme premier paramètre et éventuellement un nom de chaîne, comme le deuxième, mais jamais d'une url. Et vous n'avez même pas besoin de créer un Fichier objet, puisque ce que vous pouvez faire avec un Fichier qui peut être fait avec une Goutte directement)
J'ai essayé d'enlever la var myfile = newFile([""],"uploads/extras/item_a/image1.png"); et ajouter reader.readAsDataURL("uploads/extras/item_a/image1.png"); et il me donne un message d' : Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
Oui, parce que ni FileReader, ni new File ne récupérer des données que ce soit. Donc si vous êtes ok avec ES6 (uniquement les nouveaux navigateurs), vous pouvez en quelque sorte d'obtenir ce que vous voulez avec fetch("uploads/extras/item_a/image1.png").then(r=>r.blob()).then(blob=>{let img = new Image(); img.src = URL.createObjectURL(blob); document.body.appendChild(img)}). Pour es5 façon, vous auriez à utiliser une XHR. Aussi, puisque vous ne nous montrez pas ce que vous voulez faire avec le fichier, il est vraiment difficile de comprendre pourquoi vous ne pouvez pas tout img.src = "uploads/extras/item_a/image1.png".

InformationsquelleAutor Trish Siquian | 2017-02-28

filereader javascript

12

Voici la bonne façon de le faire

JS:
```
  var openFile = function(file) {
    var input = file.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
  };
```
HTML:
```
<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output' style="height:100px; width:100px;">
```
Faire une petite enquête pour savoir où est l'erreur dans votre code, c'est mieux d'apprendre à

Lorsque vous le donner, il suffit de laisser un commentaire ici, je serai heureux de l'aider à nouveau! 🙂
- Merci! Mais, je n'ai pas de wan à utiliser <input> tag. J'ai envie de le lire à la main.
- Pas de la manière correcte est output.src = URL.createObjectURL(input.files[0]);. Mais OP tente de charger un fichier depuis une url, et non pas à partir d'un fichier d'entrée.
- vous simplement ne pouvez pas le faire de cette façon, c'est de sécurité du navigateur, ce qui vous empêchera.
- elle essaie de charger à partir d'un fichier local, qui n'est pas possible, si elle est le chargement de l'url (http/s, ou quoi que ce soit pas file:///) elle préfère utiliser la balise img quoi sert-elle si elle ne débite pas!!
- Je suis d'accord il n'est pas clair ce que l'OP est en train de faire, mais encore, mon point est que votre façon de l'affichage d'une entrée de fichier n'est pas le correct une. Et vous serez d'accord que votre réponse ne répond pas à la question de toute façon. Et l'OP n'a jamais parlé à propos de fichier local (à partir du protocole file://), de sorte XHR fonctionnerait, et img.src = url serait trop de travail.
- les deux chemins mènent à Rome notre vous voyez! reader.result et URL.createObjectURL(input.files[0]) donner le nécessaire url... que le lecteur de fichier créer l'url et de le stocker dans son résultat
- mais votre façon, c'est aller de Naples à Rome par São Paulo... C'est asynchrone pour rien, et de polluer la mémoire avec 1,3 fois le contenu du fichier. Alors que URL.createObjectURL est synchrone et est juste un pointeur direct vers le fichier stocké dans de l'utilisateur du disque dur.
- Laissez-nous continuer cette discussion dans le chat.
- la valeur du résultat sera de toute façon créé et il est de taille égale à l'URL de l'objet créé... Le temps nécessaire, c'est comme 20µs pour les deux... où est le big deal qui devrait en faire un souci pour utiliser la première ou l'autre
InformationsquelleAutor Omar El Don

Vous devez vous connecter pour publier un commentaire.