Datei-upload von <input type="file">

Verwendung von Winkel-2 beta, ich kann nicht scheinen, um eine <input type="file"> zu arbeiten.

Diagnose, die ich sehen kann, zwei-Wege Bindung für andere types wie text.

<form>
    {{diagnostic}}
    <div class="form-group">
        <label for="fileupload">Upload</label>
        <input type="file" class="form-control" [(ngModel)]="model.fileupload">
    </div>
</form>

In meinem Typoskript-Datei habe ich folgende Diagnose-Linie:

get diagnostic() { return JSON.stringify(this.model); }

Könnte es sein, dass es das Problem nicht JSON? Der Wert ist null.

Ich kann nicht wirklich überprüfen Sie den Wert des input. Yven obwohl der text neben "Datei Wählen ..." - updates, ich sehe nicht, Unterschiede in den DOM-aus irgendeinem Grund.

Ich habe die Datei-upload mit diesem Weg. Sehen, ob es hilft : stackoverflow.com/a/43288706/3764156

InformationsquelleAutor PascalVKooten | 2016-02-15

67

Ich denke, dass es nicht unterstützt wird. Wenn Sie einen Blick auf diese DefaultValueAccessor Richtlinie (siehe https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/default_value_accessor.ts#L23). Sie werden sehen, dass der Wert, der verwendet wird zum aktualisieren der gebundenen element ist $event.target.value.

Dies gilt nicht im Falle von Vorleistungen, die mit Typ file da das file-Objekt kann erreicht werden $event.srcElement.files statt.

Weitere details, können Sie einen Blick auf diese plunkr: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info:
```
@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="file" (change)="onChange($event)"/>
    </div>
  `,
  providers: [ UploadService ]
})
export class AppComponent {
  onChange(event) {
    var files = event.srcElement.files;
    console.log(files);
  }
}
```
- Ich denke, es ist vielleicht von design, dass der client nicht produzieren kann ein JSON-Wert für den Wert...
- In der Tat, die ngModel verwendet werden können für etwas anderes als das erzeugen von JSON 😉 Vielleicht mit der files - Attribut auf den Wert der gebundenen ngModel könnte etwas möglich... Meine 2 Cent
- onChange-Ereignis nicht erkennen, wenn die gleiche Datei hochgeladen zum zweiten mal, um änderungen in den Daten.
- dies scheint nicht gültig zu sein, event keinen srcElement Eigenschaft
- Siehe die Antwort für eine HTMLInputEvent geben.
InformationsquelleAutor Thierry Templier

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input name="file" type="file" (change)="onChange($event)"/>
    </div>
  `,
  providers: [ UploadService ]
})
export class AppComponent {
  file: File;
  onChange(event: EventTarget) {
        let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        let files: FileList = target.files;
        this.file = files[0];
        console.log(this.file);
    }

   doAnythingWithFile() {
   }

}

InformationsquelleAutor Ashish Doneriya

28

Gibt es eine etwas bessere Möglichkeit zum Zugriff auf angehängte Dateien. Könnten Sie template Referenz-variable um eine Instanz des input-Elements.

Hier ist ein Beispiel, basierend auf die erste Antwort:
```
@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="file" #file (change)="onChange(file.files)"/>
    </div>
  `,
  providers: [ UploadService ]
})

export class AppComponent {
  onChange(files) {
    console.log(files);
  }
}
```
Hier ist ein Beispiel-app um das zu demonstrieren, in Aktion.

Vorlage referenzieren Variablen, die nützlich sein könnten, könnten Sie z.B. Zugriff via @ViewChild direkt in den controller.
- Hi @Belter, hier ist ein funktionierendes Beispiel, das habe ich gerade gemacht plnkr. Welche version von Ng verwenden Sie? Was genau funktioniert nicht?
- Hmm, ich habe es versucht mit den beiden Ng 2.4.0 und 4.3.0 (das scheint Sie verwenden). Außerdem können Sie überprüfen, template reference-Variablen in der Dokumentation. Sind Sie immer Fehler?
InformationsquelleAutor Frelseren

Andere Weise mit Vorlage Referenz-variable und ViewChild, wie vorgeschlagen, durch Frelseren:

import { ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="file" #fileInput/>
    </div>
  `
})  
export class AppComponent {
  @ViewChild("fileInput") fileInputVariable: any;
  randomMethod() {
    const files = this.fileInputVariable.nativeElement.files;
    console.log(files);
  }
}

Siehe auch https://stackoverflow.com/a/40165524/4361955

InformationsquelleAutor jhujhul

Versuchen, diese kleine lib, funktioniert mit Eckigen 5.0.0

https://www.npmjs.com/package/ng2-file-upload

Quickstart Beispiel mit ng2-Datei-upload 1.3.0:

Benutzer auf die benutzerdefinierte Schaltfläche, die Trigger dialog zum hochladen von versteckten input type="file" Upload startet automatisch nach der Auswahl einer einzelnen Datei.

app.- Modul.ts:

import {FileUploadModule} from "ng2-file-upload";

your.component.html:

...
  <button mat-button onclick="document.getElementById('myFileInputField').click()" >
    Select and upload file
  </button>
  <input type="file" id="myFileInputField" ng2FileSelect [uploader]="uploader" style="display:none">
...

Ihr.Komponente.ts:

import {FileUploader} from 'ng2-file-upload';
...    
uploader: FileUploader;
...
constructor() {
   this.uploader = new FileUploader({url: "/your-api/some-endpoint"});
   this.uploader.onErrorItem = item => {
       console.error("Failed to upload");
       this.clearUploadField();
   };
   this.uploader.onCompleteItem = (item, response) => {
       console.info("Successfully uploaded");
       this.clearUploadField();

       //(Optional) Parsing of response
       let responseObject = JSON.parse(response) as MyCustomClass;

   };

   //Asks uploader to start upload file automatically after selecting file
  this.uploader.onAfterAddingFile = fileItem => this.uploader.uploadAll();
}

private clearUploadField(): void {
    (<HTMLInputElement>window.document.getElementById('myFileInputField'))
    .value = "";
}

Alternative lib, funktioniert in Eckigen 4.2.4, erfordert aber einige workarounds, um zu übernehmen Winkel-5.0.0

https://www.npmjs.com/package/angular2-http-file-upload

InformationsquelleAutor Yurii Bratchuk

Wenn Sie ein Komplexes Formular mit mehreren Dateien und anderen inputs hier ist eine Lösung, die spielt schön mit ngModel.

Es besteht aus einer Datei input-Komponente umschließt, die eine einfache Datei-Eingang und implementiert die ControlValueAccessor - Schnittstelle, um es konsumierbar durch ngModel. Die Komponente stellt die FileList Objekt ngModel.

Diese Lösung basiert auf diese Artikel.

Die Komponente verwendet wird wie dieses:

<file-input name="file" inputId="file" [(ngModel)]="user.photo"></file-input>
<label for="file"> Select file </label>

Hier ist die Komponente-code:

import { Component, Input, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const noop = () => {
};

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => FileInputComponent),
    multi: true
};

@Component({
  selector: 'file-input',
  templateUrl: './file-input.component.html',
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class FileInputComponent {

  @Input()
  public name:string;

  @Input()
  public inputId:string;

  private innerValue:any;

  constructor() { }

  get value(): FileList {
    return this.innerValue;
  };

  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: FileList) => void = noop;

  set value(v: FileList) {
    if (v !== this.innerValue) {
      this.innerValue = v;
      this.onChangeCallback(v);
    }
  }

  onBlur() {
    this.onTouchedCallback();
  }

  writeValue(value: FileList) {
    if (value !== this.innerValue) {
      this.innerValue = value;
    }
  }

  registerOnChange(fn: any) {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouchedCallback = fn;
  }

  changeFile(event) {
    this.value = event.target.files;
  }
}

Und hier ist die Komponente Vorlage:

<input type="file" name="{{ name }}" id="{{ inputId }}" multiple="multiple" (change)="changeFile($event)"/>

InformationsquelleAutor Jens

0

nur versuchen (onclick)="this.value = null"

in Ihre html-Seite hinzufügen onclick-Methode zum entfernen von vorherigen Wert, so dass Benutzer können wählen Sie dieselbe Datei erneut.

InformationsquelleAutor yogesh chavan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.