javascript - 单击按钮在 AngularJS + TypeScript 中浏览文件

标签 javascript html angularjs spring typescript

我有 user.component.htmluser.component.ts 我找到的所有示例都是以这种方式在 html 中 <input type="file" /> 我不想使用这种风格。我的 html 文件中有:

<button type="button" class="btn" (click)="openPicture()" Browse </button>

下面是ts文件上的函数:

  public openPicture() {
    //for testing
    console.log('button clicked to open picture');

    var picture = browse.the.picture.and.assing.to.this.variable;

    //another test, see on console if picture is read
    console.log('%c       ', 'font-size: 100px; background: {{picture}} no-repeat;');
    // Later display picture variable on html and save to database or do anything desired.
}

我找到了一个 example在 stackoverflow 上使用 angular/material但我没有这个模块。有没有其他替代方法,无需安装任何额外的包来解决这个问题?

最佳答案

你可以这样实现

<input type="file" style="display: none" #file (change)="fileChange($event)"/>
<button type="button" class="btn" (click)="file.click()"> Browse </button>

.ts

export class AppComponent {
  file: File;

  constructor() {

  }

  fileChange(file) {
    this.file = file.target.files[0];
    console.log(this.file.name);
  }
}

关于javascript - 单击按钮在 AngularJS + TypeScript 中浏览文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47312562/

相关文章:

angularjs - 使用模拟测试 AngularJS 服务的初始化

javascript - 在不同的设备上显示不同的图像

javascript - NextJS - 在一页上进行多次获取的动态路由

javascript - 在html中使用ajax解析xml文件

javascript - 使用javascript增加html十六进制字符代码

php - 如何保护我的 php 脚本不被其他域调用?

javascript - D3 有界平移

javascript - 使用 localstorage 为同一域下的另一个页面存储用户的电子邮件地址是一种好习惯吗?

javascript - Angular 选择延迟加载项目的默认值

javascript - 'chunked' 响应进入 AngularJS 后立即显示的方法是什么?