.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 dans angular 5. Je veux aussi afficher l'image dans tous les navigateurs. S'il vous plaît aider. Merci d'avance.
.html
Mettez à jour l'événement attr et le paramètre handler pour input ..__ et utilisez la liaison de données pour l'attribut src. Ce qui suit s'appliquera à src si ce n'est pas une URL nulle, non définie ou codée 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 composant ts (classe), vous devriez avoir la propriété imageSrc
qui sera utilisée dans view (html) et votre fonction devrait ê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);
}
}
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 est que j'ai reçu l'erreur ci-dessous dans les outils de développement Chrome à chaque génération d'un aperçu d'image:
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:
Après quelques manipulations et des dépannages, j'ai pu trouver la solution que j'ai incluse dans l'édition ci-dessous.
EDIT: Compris. Je n'ai pas eu le || ' http://placehold.it/180 ' "inclus dans le [src] =" sur mon composant.html. Devinez c'est un problème de timing. Trié maintenant. plus d'erreur.
Vous devrez peut-être simplement changer votre javascript function
en 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]);
}
}
Cela 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 suit:
Dans votre fichier .ts
avant constructor
, définissez une propriété sur 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
va maintenant ressembler à ceci:
<input type='file' (change)="readURL(this);" />
<img id="blah" [src]="url" alt="your image" />
Veuillez changer comme -> this.url = event.target.result;
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]);
}
}
Je sais que je suis en retard, mais je viens de rencontrer ce problème à la fois pour l'image et l'audio. Les solutions ci-dessus ont bien fonctionné pour les images mais pas très bien pour l'audio. Tout a finalement fonctionné en utilisant un objet URL au lieu d'un objet FileReader que tout le monde utilise. quelque chose comme ce qui suit
fichier composant.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 composant.html ressemble à ~
<img [src]="imgSrc | sanitizeUrl"> <!-- using a Custom Pipe -->
Enfin, j'ai créé un tuyau personnalisé pour débarrasser la console des avertissements . Mon tuyau est comme suit ~
@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. Ce ne sont que 2 lignes supplémentaires de code explicite.