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

使用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();
 });

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

2 个答案: