使用Jquery單擊隱藏文件上傳按鈕？

Question

我有一個隱藏的文件上傳，因為它看起來非常糟糕，我已經顯示了一個更好看的按鈕，並希望它點擊隱藏文件上傳時單擊。

function ClickUpload() {
    $("#FileUpload").trigger('click');
}

<div id="MyUpload">
    <span id="FileName">Choose File</span>
    <input id="uploadButton" type="button" value="Upload" onclick="ClickUpload()"> 
</div>
<div id="hideUglyUpload">
    <input type="file" name="FileUpload" id="FileUpload"/>
</div>

到目前為止，我可以進入函數ClickUpload（）但它只是通過單擊而沒有彈出文件選擇窗口。

Answer 1

奇怪的是它不起作用。 嘗試

<input id="uploadButton" type="button" value="Upload" onclick='$("#FileUpload").click()'> 

Answer 2

我不想在標記中使用內聯JS函數調用...所以稍微改變一下......

   $(document).ready(function() {
      $('#uploadButton').on('click',function(evt){
         evt.preventDefault();
         $('#FileUpload').trigger('click');
     });
  });

<div id="MyUpload">
    <span id="FileName">Choose File</span>
    <input id="uploadButton" type="button" value="Upload"> 
</div>
<div id="hideUglyUpload">
    <input type="file" name="FileUpload" id="FileUpload"/>
</div>