自定义上传按钮可在台式机上使用，但不能在移动设备上使用

Question

目前，我在网站上使用自定义上传按钮，旁边是带有.invisible-file-input类的隐藏文件.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

有一个很好的方法可以使用label来做到这一点！

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

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

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

Answer 2

试试这个：

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