web-dev-qa-db-ja.com

入力タイプファイルAngular2からファイル名を取得する

モーダルビューでhtml入力タグからファイル名を取得し、Angular2を使用して保存します。誰かが私を助けることができますか？

htmlangularangular2-templatehtml-input
11
Sandro De Marco

次のことができます：

HTML：

<input type="file" (change)="fileEvent($event)" />

TypeScript：

fileEvent(fileInput: Event){
    let file = fileInput.target.files[0];
    let fileName = file.name;
}
28
Igor Janković

よりエレガントなオプションを試すことができます：

HTML：

<input #file type="file" (change)="updateFile(file)">

スクリプト：

updateFile(file: HTMLInputElement) {
  let name = file.value;
}
3
Sergey Dzyuba
<button (click)="imgFileInput.click()">Add</button>
    {{ imgFileInput?.files[0]?.name }}
<input hidden type="file" #imgFileInput (change)="uploadSingle($event)"/>
2
Stepan Prokopiak

この作品は私を形成します：

[〜＃〜] html [〜＃〜]

<input type="file" (change)="detectFiles($event)">
<div class="output">Seleccionado: {{ fileName }} </div>

[〜＃〜] ts [〜＃〜]

selectedFiles: FileList;
fileName: string;

detectFiles(event) {
    this.selectedFiles = event.target.files;
    this.fileName = this.selectedFiles[0].name;
    console.log('selectedFiles: ' + this.fileName );
  }
1
Alvargon

HTML

<input type="file" (change)="onFileChange($event)">

スクリプト

onFileChange(event) {    
     let files = event.target.files[0].name;
}
1
Vivek Singh

このリンクの https://stackoverflow.com/a/44932086/4281182 @SelçukCihanによって提案された解決策は役に立たなかったので、私の回避策はこれを行うことでfileInputパラメータタイプを「any」にすることでした

fileEvent(fileInput){
    let file = fileInput.target.files[0];
    let fileName = file.name;
}

tSランタイムでは、これは純粋なJSコードです

とにかく、この素晴らしいansに感謝します。

0
Mohammed Yousif