Angular-CSS-自定义类型=文件输入，如何使用按钮代替标签? [英] Angular - CSS - custom type=file input, how to use a button instead of label?

问题描述

我创建了一个类型为"file"的自定义输入字段，因为我不喜欢默认字段. 为此，我做到了:

I made a custom input field of type="file" as I didn't like the default one. 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>

所以基本上它隐藏了原始输入，并且带有标签，我可以通过单击mat-icon打开浏览文件窗口.

so basically it hides the original input, and with the tag I can open the browse file window by clicking on the mat-icon.

这很好用，但是我想使用标签<button mat-icon-button>代替标签来在图标上产生很好的波纹效果，但是标签中使用的"for"不适用于<button>.

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>.

如果我用上面的按钮标签将mat-icon包装在标签标签中，会发生什么情况，button看起来像我想要的样子，但是当我单击没有任何反应时，我想这是因为button在label上方，因此label没有获得点击，我尝试使用z-index，但无法正常工作.

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.

关于如何解决此问题的任何想法?

Any ideas on how to solve this?

推荐答案

只需创建一个按钮，其单击将触发隐藏文件输入上的click事件

Just make a button whose click fires a click event on the hidden file input

<button (click)="uploadFile.click()" mat-icon-button>
 <mat-icon>arrow_upward</mat-icon>
</button>

这篇关于Angular-CSS-自定义类型=文件输入，如何使用按钮代替标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！