Question

实际上，我正在尝试在这里学习角度知识。

我要做的第一件事是做一些简单的文件上传。

我已经有我的Web API，并且已经有一个简单的文件选择，但是问题是它没有显示浏览的文件

这是屏幕截图

在屏幕截图中。我已经浏览了文件。但是问题在于它现在正在显示所选文件。但是，当我将鼠标移到我的选择文件输入上时。文件名将像工具箱一样弹出。但是未在文件输入中设置名称。我怎样才能做到这一点？

下面是我正在使用的HTML代码

<div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
      </div>
      <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile01"
          aria-describedby="inputGroupFileAddon01">
        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
      </div>
    </div>

谢谢

Answer 1

通常，您可以读取通过在输入上使用change事件选择的文件。

例如，在组件模板中-

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

以及在课程中-

  files: any[];

  onFileChange(event){
    this.files = event.target.files;
    // here you can take more action like reading content, etc
  }

“文件”是一组选定文件，可提供您可能用于任务的信息，例如名称，大小，类型，最后修改的信息等。

有关更多信息，请参阅以下内容- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

我希望这会有用。

Angular File Input所选文件未显示

1 个答案: