使用 Jquery 单击隐藏的文件上传按钮？答案

【问题标题】：Use Jquery to click a hidden file upload button?使用 Jquery 单击隐藏的文件上传按钮？
【发布时间】：2014-06-30 00:27:51
【问题描述】：

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

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() 函数，但它只是通过单击而不弹出文件选择窗口。

【问题讨论】：

它适用于我jsfiddle.net/uAFY6/2
您使用的是哪种浏览器？
我唯一能想到的与@A.Wolff 的评论在同一行...也许某些浏览器只会在用户启动的事件触发文件对话框时才启动文件对话框。您的 trigger 函数不是用户启动的，因此浏览器可能会阻止它。
@Lix AFAIK，旧浏览器（chrome 版本？）不允许隐藏输入，输入需要放在视口之外。但我可以测试它，现在它可以在 chrome 上运行
使用.triggerhandler()时，您可以检查触发点击的天气，如果没有，则显示正常的input type=file：api.jquery.com/triggerhandler

标签： javascript jquery button file-upload click

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

这和OP的方法有什么区别？
我在上传click中做同样的代码和写ajax方法。但是这里的函数工作了两次。有什么解决办法吗？