カスタムアップロードボタンは、デスクトップでは動作しますがモバイルでは動作しません。

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でスタイルlabel.file-upload-btnそして、そう...

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

のように、ラベルのfor属性に隠し入力のIDを追加します。これはまったく同じように見えますが、関連する入力にラベルを付けることにより、ファイルのアップロードダイアログは一貫して表示されます。

Answer 2

は、この方法を試してください。

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