最终解决方案(适用于Angular Material和Bootstrap):
我设置了3个不同的组件:
HTML代码:
<div>
<button #file class="btn btn-light">Examinate</button>
<div style="display: inline-block">
<input #myInput formControlName="file"
id="file" name="file" (change)="postMethod($event.target.files)" type="file"/>
<p>{{file}}</p>
</div>
</div>
CSS(层叠样式表)
使用CSS,我强制输入覆盖在按钮上,并设置opacity=0
以使按钮可见。
- 按钮:
float:left;
position:absolute;
z-index:-1;
- 输入:
opacity: 0; //Not visible
font-size: 0;
//Button dimensions
width: 90px;
height: 37px;
float: left;
- 输入(悬停):
cursor: pointer;
- 标签:
float: left;
margin-left: 6px;
margin-top: 7px;
以下是最终结果:
您无法直接样式化input type file,最佳方法是创建与input type file相对应的覆盖元素。
使用Material,您几乎可以样式化所有与Material相关的内容,当然,您可以将Material中的类添加到自定义组件中,但这不是Material的用途。
简单的例子,您不应该这样做:
<div class="mat-card"></div>
<mat-card></mat-card>
<mat-card class="input-container">
<button #file mat-flat-button color="primary">Examinar...
<input multiple (change)="onFileSelected($event)" style="opacity: 0; position:absolute; left:0px; top:0px; width:100%; height:100%;" type="file"/>
</button>
{{files|json}}
</mat-card>
TS:
files: string[] = [];
onFileSelected(event) {
if (event.target.files.length > 0) {
for (let i = 0; i < event.target.files.length; i++) {
this.files.push(event.target.files[i].name);
console.log(event.target.files[0].name);
}
}
}
CSS:
.input-container {
position:relative;
}
这只是一个简单的例子。
但我仍然更喜欢使用像https://www.npmjs.com/package/ngx-dropzone这样的npm包。
onSubmit()
方法,而不是打开文件选择器,这正是我需要的点击事件行为。我猜想无法实现我所需的功能。 - Iñigocss/scss/sass
中:#fi {
background-color: pink;
...
}
使用Angular Material不是一个好的方式来为单个按钮设置样式。如果您想要为组设置样式,我建议阅读这篇文章:https://material.angular.io/guide/customizing-component-styles
类型为file
的输入元素不容易进行样式设置。
这里有一个Plunkr示例,展示如何实现:
.fileContainer {
overflow: hidden;
position: relative;
cursor: pointer;
background-color: pink;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
<label class="fileContainer">
File upload
<input type="file"/>
</label>