.html

  <input type='file' onchange="readURL(this);" />
  <img id="blah" src="http://placehold.it/180" alt="your image" />

.css

img{
  max-width:180px;
}
input[type=file]{
padding:10px;
background:#2d2d2d;}

.js

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById('blah').src=e.target.result
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

J'ai ce code pour afficher l'aperçu de l'image avant de le télécharger. Cependant, je travaille avec angular 5 donc j'ai un fichier .ts au lieu de .js. Comment puis-je faire la même chose en angulaire 5. Je souhaite également afficher l'image dans tous les navigateurs. Veuillez aider. Merci d'avance.

8
Mrinalini Pal 23 mai 2018 à 10:53

6 réponses

Meilleure réponse

.html

Mettre à jour le paramètre attr événement et gestionnaire pour l'entrée. Et vous devez utiliser la liaison de données pour l'attribut src. Ce qui suit s'appliquera src s'il n'est pas nul ou non défini ou url codé en dur ('http://placehold.it/180' )

<input type='file' (change)="readURL($event);" />
<img id="blah" [src]="imageSrc || 'http://placehold.it/180'" alt="your image" />

.ts

Dans le fichier de composant ts (classe), vous devez avoir la propriété imageSrc qui doit être utilisée dans la vue (html) et votre fonction doit être une méthode de cette classe

...
imageSrc: string;
...
constructor(...) {...}
...
readURL(event: Event): void {
    if (event.target.files && event.target.files[0]) {
        const file = event.target.files[0];

        const reader = new FileReader();
        reader.onload = e => this.imageSrc = reader.result;

        reader.readAsDataURL(file);
    }
}
37
Coffee-Tea 23 mai 2018 à 08:36

J'utilise le code ci-dessous pour implémenter l'aperçu de l'image:

onFileChange(event: any) {
this.userFile = event.target.files[0];
this.imageSelected = this.userFile.name;
if (event.target.files && event.target.files[0]) {
  const reader = new FileReader();
  reader.onload = (e: any) => {
    this.imageSrc = e.target.result;
  };
  reader.readAsDataURL(event.target.files[0]);
}}

Ce qui fonctionne très bien et affiche l'aperçu de l'image. Le problème auquel j'ai été confronté à l'origine était que j'ai reçu l'erreur ci-dessous dans les outils de développement Chrome chaque fois qu'un aperçu d'image est généré:

null 404 GET Error

Tout a bien fonctionné, il n'y a pas d'autres erreurs.

Si j'ai cliqué sur le null: 1 j'ai été dirigé vers le ci-dessous:

null:1

Après quelques manipulations et dépannage, j'ai pu trouver la solution que j'ai incluse dans l'édition ci-dessous.

EDIT: Je l'ai compris. Je n'avais pas le || 'http://placehold.it/180' "inclus dans le [src] =" sur mon composant. html. Je suppose que c'est un problème de timing. Trié maintenant. plus d'erreur.

3
fromage9747 15 nov. 2018 à 10:10

Qu'en est-il de l'utilisation de @HostListner, car Angular n'est pas fourni avec un accesseur de valeur intégré pour l'entrée de fichier.

  @HostListener('change', ['$event.target.files'])
  emitFiles( event: FileList ) {
    const file = event && event.item(0);
    this.onChange(file);
    const reader = new FileReader();
    reader.readAsDataURL(file); // toBase64
    reader.onload = () => {
      this.imageURL = reader.result as string; // base64 Image src
    };

Ensuite, dans le HTML, vous pouvez utiliser quelque chose comme:

  <picture >
    <source media='(min-width:0px)' [srcset]="imageURL">
    <img src=""  [alt]="Your photo">
  </picture>
0
Slimane Deb 29 déc. 2019 à 07:28

Je sais que je suis en retard, mais je viens de rencontrer ce problème pour l'image et l'audio. Les solutions ci-dessus fonctionnaient très bien pour les images mais pas très bien pour l'audio. J'ai finalement tout fait fonctionner en utilisant un objet URL au lieu de l'objet FileReader que tout le monde utilise. quelque chose comme ce qui suit

Fichier component.ts ~

imgSrc = 'assets/path/to/default/image.jpeg'

imgFileSelected(event: any) {
  if (event.target.files && event.target.files[0]) {
    this.imgSrc = URL.createObjectURL(event.target.files[0]);
  }
}

Mon component.html ressemble à ~

<img [src]="imgSrc | sanitizeUrl"> <!-- using a Custom Pipe -->

Enfin, j'ai créé un tube personnalisé pour débarrasser la console des avertissements. ma pipe est la suivante ~

@Pipe({
  name: 'sanitizerUrl'
})
export class SanitizerUrlPipe implements PipeTransform {

  constructor (
    private sanitize: DomSanitizer
  ) {}

  transform(value: string): SafeUrl {
    return this.sanitize.bypassSecurityTrustUrl(value);
  }
}

Pour voir comment j'ai utilisé cela pour la balise audio, vous pouvez consultez ce lien. Il ne s'agit que de 2 lignes supplémentaires de code explicite.

2
Joseph Vargas 29 déc. 2018 à 02:46

Pour prévisualiser l'image choisie avant de télécharger ce code vous aidera, c'est facile. il, s aperçu seulement l'image si autre chose alors il vous donnera une erreur ce code est pour component.ts

  public imagePath;
 imgURL: any;
 public message: string;
 preview(files) {
 if (files.length === 0)
  return;
 var mimeType = files[0].type;
 if (mimeType.match(/image\/*/) == null) {
  this.message = "Only images are supported.";
  return;
 }
 var reader = new FileReader();
 this.imagePath = files;
 reader.readAsDataURL(files[0]); 
 reader.onload = (_event) => { 
 this.imgURL = reader.result; 
}
}

Et ces lignes de code dans la vue des composants

 <span style="color:red;" *ngIf="message">{{message}}</span>
 <input #file type="file" accept='image/*' (change)="preview(file.files)" />
 <img [src]="imgURL" height="200" *ngIf="imgURL">
0
abubakkar tahir 13 déc. 2019 à 05:59

Vous devrez peut-être simplement remplacer votre javascript function par typescript comme ci-dessous.

readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = (e:any) => {
             (<HTMLImageElement>document.getElementById('blah')).src=e.target.result 
             //assuming element with id blah will always be an ImageElement
        };

        reader.readAsDataURL(input.files[0]);
    }
}

Ça devrait être ça.

Mettre à jour

Vous pouvez également définir une propriété et la lier à l'image src et modifier sa valeur en conséquence comme ci-dessous:

Dans votre fichier .ts avant constructor, définissez une propriété comme url et définissez sa valeur par défaut sur http://placehold.it/180.

url: string = 'http://placehold.it/180';

Vous pouvez mettre à jour cette propriété dans reader.onload comme ci-dessous:

readURL(event:any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (event:any) => {
     this.url = event.target.result;
    }

    reader.readAsDataURL(event.target.files[0]);
  }
}

Votre html ressemblera maintenant à ceci:

<input type='file' (change)="readURL(this);" />
<img id="blah" [src]="url" alt="your image" />
1
Guruprasad Rao 28 févr. 2019 à 09:12