我有 user.component.html 和 user.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/