带输入文件的Angular 4/5材质凸起按钮 [英] Angular 4/5 material raised button with input file
问题描述
我正在开发一个有角度的应用程序,目前正在上传我正在使用的文件:
I am working on a angular application, currently to upload a file I am using this :
<label class="btn btn-default">
<input type="file" (change)="selectFile($event)">
</label>
<button class="btn btn-success" [disabled]="!selectedFiles"
(click)="upload()">Upload</button>
在.ts文件中具有方法,效果很好.
with methods on my .ts file, it is working well.
我现在想将其升级为像这样的实质性的角度组件凸起按钮:
I want to upgrade this to material angular components raised button like that right now :
<button mat-raised-button>
<input type="file" (change)="selectFile($event)">
</button>
<button mat-button disabled [disabled]="!selectedFiles" (click)="upload()">Upload</button>
disabled按钮效果很好,但是输入文件部分不起作用,打印错误,并且没有打开文件夹搜索窗口.有什么想法吗?
the disabled button is doing well but the input file part doesnt work , it prints baddly and does not open a file folder search window. any ideas?
推荐答案
建议不要在按钮内使用输入字段,最好先隐藏文件输入,然后再隐藏按钮以触发它.下面的示例将显示它的一个最小示例.
Won't advise using input field within a button, better you hide the file input and then a button to trigger it. The below example will show a minimal example of it
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}} is for Uploading</h2>
</div>
<button mat-raised-button (click)="openInput()">
Select File to Upload
</button>
<input id="fileInput" hidden type="file" (change)="fileChange($event.target.files)" >
<button mat-button [disabled]="!ourFile" (click)="upload()">Upload</button>
`
})
export class App {
name:string;
ourFile: File; // hold our file
constructor() {
this.name = `Angular! v${VERSION.full}`
}
/**
* this is used to trigger the input
*/
openInput(){
// your can use ElementRef for this later
document.getElementById("fileInput").click();
}
fileChange(files: File[]) {
if (files.length > 0) {
this.ourFile = files[0];
}
}
/**
* this is used to perform the actual upload
*/
upload() {
console.log('sending this to server', this.ourFile);
}
}
选中此 plnk
在上面的示例中,您应该能够在不影响HTML语义的情况下对按钮进行样式设置
With the above example, you should be able to style your button without distorting HTML semantics
这篇关于带输入文件的Angular 4/5材质凸起按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!