javascript - 自定义上传按钮适用于桌面但不适用于移动设备

Question

目前，我在网站中的隐藏文件输入旁边使用了一个自定义上传按钮，该按钮的类别为 .invisible-file-input。

我的网站上有以下内容:

Javascript

 $('.call-upload').click(function () {
        $(this).siblings('.invisible-file-input').click();
 });

CSS

.invisible-file-input {
    position: fixed;
    top: -200vh;
}

HTML

<input class="invisible-file-input" name="document" type="file">

<button class="btn btn-primary btn-block call-upload" type="button">
    Upload Document
</button>

单击按钮时，它只是打开文件选择窗口，这在桌面浏览器上运行良好，但一旦您使用移动设备，它就不会在单击按钮时执行任何操作。

Answer 1

有一个很好的方法可以使用标签来做到这一点!

将隐藏输入的 id 添加到标签的 for 属性中，如下所示...

<label class="file-upload-btn" for="inputId">Button Text</label>

然后在 css 中使用您现在用于按钮的样式设置 label.file-upload-btn 样式。它看起来完全一样，但由于标签强制相关输入聚焦，因此文件上传对话框现在将保持一致。