自定義上傳按鈕適用於桌面，但不適用於手機

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一個偉大的方式！

在CSS中添加隱藏的輸入的ID到標籤的for屬性是這樣的...

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

然後風格label.file-upload-btn與您現在使用該按鈕的樣式。它看起來完全一樣，但由於標籤強制相關輸入被聚焦，所以文件上傳對話框將保持一致。

Answer 2

試試這個：

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