Question

场景如下，我有一个可以上传文件的组件，但是看起来确实很丑陋（经典input type="file"），所以我想制作一个样式化的标签（可能是图像或其他内容），当您单击您将获得与单击文件输入相同的行为。

我设法通过将upload.component的模板放在要使用的模板中来完成这项工作，但是由于我需要在许多不同的位置上传文件，因此我不想每个都重复代码时间。

这很好用。.

.image-upload > input
{
    display: none;
}

<div class="image-upload">
    <label for="file-input">
        <img src="placeholder.jpg"/>
    </label>

    <input id="file-input" type="file"/>
</div>

这不是。

<!-- my-other.component.html -->
<label for="file-input">
    <img src="placeholder.jpg"/>
</label>
<app-upload></app-upload>

<!-- upload.component.html -->
<input id="file-input" type="file" />

有没有办法引用组件内部“封闭”的输入？

Answer 1

遇到了同样的问题，我当时所做的是

CSS：

#file{
    position: absolute; 
    top: -100vh;
}

HTML：

<input type="file" id="file" name="file">
<a onclick="select_file()" id="file_button">File</a>

jQuery JS：

function select_file(){
    $('#file').click();
}

我认为您可以使用Vanilla JS来实现，但是我已经在项目中包含jQuery，所以无论如何... 并且带有onclick的元素不必是链接

专注于从组件外部的组件内部输入

1 个答案: