[英]Angular - CSS - custom type=file input, how to use a button instead of label?
I made a custom input field of type="file" as I didn't like the default one. 我创建了一个类型为“ file”的自定义输入字段,因为我不喜欢默认字段。 To achieve this I did: 为此,我做到了:
<input
#uploadFile
type="file"
id="uploadFile"
class="hidden-input"
accept="image/jpeg, .jpeg, image/png, .png, image/pjpeg, .jpg, .docx, .pdf"
(change)="selectFile($event.target.files[0])"
/>
<label [matTooltip]="Upload a file" for="uploadFile">
<mat-icon>folder_open</mat-icon>
</label>
so basically it hides the original input, and with the tag I can open the browse file window by clicking on the mat-icon. 因此基本上可以隐藏原始输入,并使用标签可以通过单击mat-icon打开浏览文件窗口。
This works well, but instead of label I wanted to use the tag <button mat-icon-button>
to have a nice ripple effect on the icon, but the "for"
used in the label doesn't work for <button>
. 这很好用,但是我不想使用标签,而是使用标签<button mat-icon-button>
在<button mat-icon-button>
上产生了很好的波纹效果,但是标签中使用的"for"
对于<button>
无效。
If I wrap my mat-icon
inside the label tag with the above button tag, what would happen is, the button
looks how I want it, but when I click nothing happens, I suppose it's because the button
is above the label
, so the label
doesn't get the click, I tried using z-index
but wouldn't work. 如果使用上面的按钮标签将mat-icon
包装在标签标签中,将会发生button
看起来像我想要的那样的情况,但是当我单击没有任何反应时,我想是因为button
在label
上方,所以label
没有获得点击,我尝试使用z-index
但无法正常工作。
Any ideas on how to solve this? 关于如何解决这个问题的任何想法?
Just make a button whose click fires a click event on the hidden file input 只需创建一个按钮,其单击将触发隐藏文件输入上的click事件
<button (click)="uploadFile.click()" mat-icon-button>
<mat-icon>arrow_upward</mat-icon>
</button>
Add this link to your index.html
将此链接添加到您的index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
To your app.module
add MatIconModule
在您的app.module
添加MatIconModule
in Html: 在HTML中:
<input #uploadFile
type="file"
id="uploadFile"
class="hidden-input"
accept="image/jpeg, .jpeg, image/png, .png, image/pjpeg, .jpg, .docx, .pdf"
/>
<button for="uploadFile" (click)="selectFile()">
<mat-icon>folder_open</mat-icon>
</button>
In ts make onchange
function: 在ts中执行onchange
函数:
files: Array<any> = [];
selectFile() {
const fileUpload = document.getElementById('uploadFile') as HTMLInputElement;
fileUpload.onchange = () => {
for (let index = 0; index < fileUpload.files.length; index++) {
const file = fileUpload.files[index];
this.files.push(data: file);
}
};
fileUpload.click();
}
.label{
padding: 10px;
color: #fff;
}
input[type="file"] {
display: none;
}
.label-input{
font: bold 13px Arial;
text-decoration: none;
background-color: #2387aa;
color: #EEEEEE;
padding: 4px 79px 5px 66px;
border-top: 1px solid #CCCCCC;
/* border-right: 1px solid #333333; */
/* border-bottom: 1px solid #333333; */
border-left: 1px solid #CCCCCC;
}
<label class="label-input"> Upload file
<input type="file" id="File">
</label>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.