webentwicklung-frage-antwort-db.com.de

Bildvorschau vor dem Hochladen in Winkel 5

.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]);
        }
    }

Ich habe diesen Code, um die Bildvorschau vor dem Hochladen anzuzeigen. Allerdings arbeite ich mit eckigen 5, also habe ich .ts-Datei statt .js. Wie kann ich dasselbe in 5 tun? Ich möchte auch ein Bild in allen Browsern anzeigen. Bitte helfen Danke im Voraus.

2
Mrinalini Pal

.html

Aktualisieren Sie event attr und handler param für die Eingabe . Sie sollten die Datenbindung für das src-Attribut verwenden. Folgendes gilt für src, wenn es nicht null oder undefined oder fest codierte URL ist (' http://placehold.it/180 ')

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

.ts

In der Komponente ts-Datei (Klasse) sollten Sie die Eigenschaft imageSrc haben, die in view (html) verwendet wird, und Ihre Funktion sollte eine Methode dieser Klasse sein

...
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);
    }
}
13
Coffee-Tea

Ich verwende den folgenden Code, um die Bildvorschau zu implementieren:

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

Das funktioniert gut und zeigt die Bildvorschau an. Das Problem, mit dem ich ursprünglich konfrontiert war, war, dass ich bei jeder Erstellung einer Bildvorschau den folgenden Fehler in den Chrome-Entwicklerwerkzeugen erhielt:

 null 404 GET Error

Alles hat gut funktioniert, es gibt keine anderen Fehler.

Wenn ich auf die Null geklickt habe: 1, wurde ich an das Folgende weitergeleitet:

 null:1

Nach einigem Fummeln und Problemlösen konnte ich die Lösung finden, die ich unten in die Bearbeitung aufgenommen habe.

EDIT: Hat es herausgefunden. Ich hatte nicht das || ' http://placehold.it/180 ' "in [src] =" in meiner Komponente.html enthalten. Ich denke, es ist ein Timing-Problem. Jetzt sortiert kein fehler mehr. 

3
fromage9747

Möglicherweise müssen Sie lediglich Ihren javascript function in TypeScript wie unten beschrieben ändern.

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

Das sollte es sein.

Update

Sie können auch eine Eigenschaft definieren und sie an image src binden und ihren Wert wie folgt ändern:

Definieren Sie in Ihrer .ts-Datei vor constructor eine Eigenschaft als url und legen Sie ihren Standardwert auf http://placehold.it/180 fest.

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

Sie können diese Eigenschaft in reader.onload wie folgt aktualisieren:

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

Ihre html wird nun wie folgt aussehen:

<input type='file' (change)="readURL(this);" />
<img id="blah" [src]="url" alt="your image" />
0
Guruprasad Rao

Bitte ändern Sie wie -> 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]);
    }
}
0
Raj Gopal

Ich weiß, dass ich zu spät komme, aber gerade dieses Problem für Bild und Audio hatte. Die oben genannten Lösungen haben für Bilder gut funktioniert, für Audio jedoch nicht. Ich habe schließlich alles zum Laufen gebracht, indem ich ein URL-Objekt anstelle des FileReader-Objekts verwendet habe, das alle verwenden. etwas wie das Folgende

komponente.ts-Datei ~

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

Meine component.html sieht aus wie ~

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

Schließlich habe ich eine benutzerdefinierte Pipe erstellt, um die Konsole von Warnungen zu befreien. Meine Pipe lautet wie folgt ~

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

  constructor (
    private sanitize: DomSanitizer
  ) {}

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

Um zu sehen, wie ich das für das Audio-Tag verwendet habe, können Sie diesen Link check out. Es sind nur 2 zusätzliche Zeilen mit selbsterklärendem Code.

0
Joseph Vargas