파일 업로드

파일 업로드

---

angular 2 베타를 사용하면 <input type="file">작동 하지 않는 것 같습니다 .

진단 사용하여, 나는이 두 방법은 다른 바인딩을 볼 수있는 type등의 text.

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

내 TypeScript 파일에는 다음과 같은 진단 줄이 있습니다.

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

JSON이 아닌 문제일까요? 값은 null입니다.

의 값을 실제로 확인할 수 없습니다 input. У "파일 선택 ..."옆의 텍스트가 업데이트되었지만 어떤 이유로 DOM에서 차이점을 볼 수 없습니다.

---

지원되지 않는다고 생각합니다. 이 DefaultValueAccessor지시문을 살펴보면 ( https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/default_value_accessor.ts#L23 참조 ). 바인딩 된 요소를 업데이트하는 데 사용되는 값이 $event.target.value입니다.

유형이있는 입력의 경우에는 대신 file파일 객체에 도달 할 수 있으므로 적용되지 않습니다 $event.srcElement.files.

자세한 내용은이 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);
  }
}

---

@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() {
   }

}

---

첨부 파일에 액세스하는 약간 더 좋은 방법이 있습니다. 템플릿 참조 변수 를 사용 하여 입력 요소의 인스턴스를 가져올 수 있습니다 .

다음은 첫 번째 답변을 기반으로 한 예입니다.

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

다음은 이를 실제로 보여주는 예제 앱 입니다.

템플릿 참조 변수가 유용 할 수 있습니다. 예를 들어 컨트롤러에서 직접 @ViewChild를 통해 액세스 할 수 있습니다.

---

Frelseren이 제안한 템플릿 참조 변수 및 ViewChild를 사용하는 또 다른 방법 :

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

https://stackoverflow.com/a/40165524/4361955 도 참조 하십시오.

---

이 작은 lib를 시도하고 Angular 5.0.0에서 작동합니다.

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

ng2-file-upload 1.3.0을 사용한 빠른 시작 예제 :

사용자가 사용자 정의 버튼을 클릭하면 숨겨진 입력 type = "file"에서 업로드 대화 상자가 트리거되고 단일 파일을 선택하면 업로드가 자동으로 시작됩니다.

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

대체 lib는 Angular 4.2.4에서 작동하지만 Angular 5.0.0을 채택하려면 몇 가지 해결 방법이 필요합니다.

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

---

여러 파일 및 기타 입력이있는 복잡한 양식이있는 경우 여기에 ngModel.

간단한 파일 입력을 래핑하고 .NET ControlValueAccessor에서 사용할 수 있도록 인터페이스를 구현하는 파일 입력 구성 요소로 구성 됩니다 ngModel. 구성 요소는 FileList개체를 ngModel.

This solution is based on this article.

The component is used like this:

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

Here's the component 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;
  }
}

And here's the component template:

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

---

just try (onclick)="this.value = null"

in your html page add onclick method to remove previous value so user can select same file again.

참고URL : https://stackoverflow.com/questions/35399617/file-upload-from-input-type-file