Question

我有一个简单的上传表单，想将显示的文件名绑定到文件输入字段<input type="file">的值，但是由于某种原因，它总是显示一些虚拟文件路径。

如何将绑定改进为不具有这种行为（仅使用文件名，例如selected.files[0].name）？

理想情况下，操作系统文件选择器完成后，所选的文件名将立即显示在#selected的标签中。评论（*ngIf中包含了我的另一种方法，但是它也不起作用。

<form>
    <div class="justify-content-center">
        <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Select image</span>
      </div>
            <div class="custom-file">
                <input type="file" accept="image/*" class="custom-file-input" id="selected" #selected (click)="message=''" >
        <label class="custom-file-label" for="selected">{{ selected.value }}</label>
<!--
        <div *ngIf="selected.files[0].name; then showFilename else showDefaultMsg"></div>
        <ng-template #showFilename>
        <label class="custom-file-label" for="selected">{{ selected.files[0].name }}</label>
        </ng-template>
        <ng-template #showDefaultMsg>
          <label class="custom-file-label" for="selected">Choose file....</label>
        </ng-template>
-->
            </div>
        </div>
    <button [disabled]="!selected.value" id="uploadBtn" class="btn btn-primary" (click)="onUpload(selected)">Upload</button>
        <div class="text-center" *ngIf="message">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading....</span>
            </div>
            <div>{{ message }}</div>
        </div>
    </div>
</form>

谢谢

Answer 1

我不认为您可以引用类似的值来获取更改。 selected是HTMLInputElement，而不是Observable<HTMLInputElement>或任何其他会在更改时产生价值的东西。

在下面的示例中，您将看到带有文本框的相同设置可以显示页面加载时的期望值，但实际上并没有对输入值进行任何更改。

StackBlitz here

您需要使用ngModel，FormControl，或只为change事件创建一个事件。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  fileName = null;

  onFileChange(evt): void {
    this.fileName = evt.target.files[0].name;
  }
}

模板

<hello name="{{ name }}"></hello>
<input type="text" #myInput value="Init Text" />
<div>Input Text: {{myInput.value}}</div>
<input type="file" (change)="onFileChange($event)" />
<div>name: {{fileName}}</div>

角度绑定到文件输入字段的选择？

1 个答案: