使用Jquery点击一个隐藏的文件上传按钮

Use Jquery to click a hidden file upload button?

本文关键字：隐藏 文件 按钮 一个 Jquery 使用      更新时间：2023-09-26

我有一个隐藏的文件上传，因为它看起来真的很糟糕，我已经显示了一个更好看的按钮，并希望它点击隐藏的文件上传。

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()，但它只是通过点击没有文件选择窗口弹出

我不喜欢在标记中使用内联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>

奇怪的是它不起作用。试着

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