Įkelti failą iš <input type = "file">

Naudodamas kampinį 2 beta, negaliu <input type="file"> .

Naudojant diagnostiką matau dvipusį įpareigojimą kitam type pvz., text .

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

„MyScript“ faile turiu šią diagnostikos eilutę:

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

Ar gali būti, kad problema nėra JSON? Vertė yra null .

Aš tikrai negaliu patikrinti input vertės. Nors tekstas šalia „Pasirinkti failą ...“ yra atnaujintas, dėl kokios nors priežasties nematau jokių skirtumų DOM.

57
15 февр. PascalVKooten nustatytas vasario 15 d 2016-02-15 03:07 '16 at 3:07 2016-02-15 03:07
@ 7 atsakymai

Manau, kad tai nepalaikoma. Jei peržiūrite šią direktyvą DefaultValueAccessor (žr. Https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/default_value_accessor.ts DefaultValueAccessor ). Pamatysite, kad vertė, naudojama atnaujinant susijusį elementą, yra $event.target.value .

Tai netaikoma įvedimui su file tipu, nes failo objektas gali būti pasiektas $event.srcElement.files .

Norėdami gauti daugiau informacijos, galite pamatyti šį 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); } } 
65
15 февр. Thierry Templier atsakymas, pateiktas vasario 15 d. 2016-02-15 11:33 '16 at 11:33 2016-02-15 11:33

Susiję klausimai


Susiję klausimai

 @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() { } } 
38
04 янв. Atsakyti Ashish Doneriya Jan 04 2017-01-04 16:50 '17, 16:50 pm 2017-01-04 16:50

Yra šiek tiek geresnis būdas pasiekti pridedamus failus. Galite naudoti atskaitos šablono kintamąjį, kad gautumėte įvesties elemento egzempliorių.

Štai pavyzdys, pagrįstas pirmuoju atsakymu:

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

Čia pateikiamas pavyzdys, kaip tai įrodyti veikiant.

Pavyzdžiui, etaloniniai šablonų kintamieji gali būti naudingi. Juos galite pasiekti per @ViewChild tiesiogiai valdiklyje.

26
05 июня '17 в 17:12 2017-06-05 17:12 atsakymą pateikė „ Frelseren “ birželio 17 d. 17 val. 17:12 2017-06-05 17:12

Kitas būdas naudoti šablono nuorodos kintamąjį ir „ViewChild“, kurį pasiūlė 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); } } 

Taip pat žiūrėkite ngn-wiki.ru.site/questions/30821 / ...

5
12 дек. Atsakymas duotas jhujhul 12.12 . 2017-12-12 18:20 '17 at 18:20 2017-12-12 18:20

Išbandykite šią mažą biblioteką, ji veikia su „Angular 5.0.0“

Greito paleidimo su ng2-file-upload 1.3.0 pavyzdys:

Vartotojas paspaudžia naudotojo mygtuką, kuris paleidžia atsisiuntimo dialogą iš paslėpto įvesties tipo = "failo", atsisiuntimas prasideda automatiškai, pasirinkus vieną failą.

app.module.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"> ... 

your.component.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 = ""; } 

Alternatyvi lib, veikia kampe 4.2.4, tačiau reikia kai kurių problemų, kaip padaryti kampinį 5.0.0

2
13 нояб. Yurii Bratchuk atsakymas lapkričio 13 d 2017-11-13 15:41 '17 at 15:41 2017-11-13 15:41

tiesiog pabandykite (onclick)="this.value = null"

html puslapyje pridėkite „onclick“ metodą, kad pašalintumėte ankstesnę vertę, kad vartotojas vėl galėtų pasirinkti tą patį failą.

0
19 февр. atsakymas pateikiamas jogo chavanas 19 vas. 2019-02-19 10:15 '19 , 10:15 val. 2019-02-19 10:15

Jei turite sudėtingą formą su keliais failais ir kitais duomenimis, čia rasite sprendimą, kuris gerai veikia su ngModel .

Jis susideda iš failo įvesties komponento, kuris ControlValueAccessor paprastą failo įvestį ir įgyvendina „ ControlValueAccessor sąsają, kad jis būtų ngModel . Komponentas pateikia „ FileList objektą ngModel objektui.

Šis sprendimas grindžiamas šiuo straipsniu.

Komponentas naudojamas taip:

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

Čia yra komponento kodas:

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

Ir čia yra komponento šablonas:

 <input type="file" name="{{ name }}" id="{{ inputId }}" multiple="multiple" (change)="changeFile($event)"/> 
0
09 мая '18 в 17:33 2018-05-09 17:33 Atsakymą Jensas pateikė gegužės 09 d. 18 d. 17:33. 2018-05-09 17:33

Žr. Kitus klausimus apie žymes arba Užduokite klausimą

"192.102.6.96 - 192.102.6.96"