从 Button 控件调用隐藏的 ASP.NET FileUpload 控件答案

【问题标题】：Call hidden ASP.NET FileUpload control from a Button control从 Button 控件调用隐藏的 ASP.NET FileUpload 控件
【发布时间】：2018-03-06 11:30:24
【问题描述】：

我有一个网页，其中包含一个 ASP.NET 文件上传控件和一个用于将文件上传到服务器的按钮。现有代码如下所示。

<div runat="server" style="width: 110%">
  <asp:FileUpload ID="fileUpload" runat="server" />
  <asp:Button ID="BtnFileUpload" runat="server"           OnClick="BtnFileUpload_Click" Text="Upload" />               
</div>

但我们的客户不希望看到标准文件上传控件的默认外观。他希望我们再添加一个按钮，并用按钮包裹文件上传控件，这样每当用户点击按钮时，文件上传对话框窗口就会打开。

谢谢

【问题讨论】：

标签： asp.net file-upload

【解决方案1】：

除了@Kevin Shah 的解决方案之外，我还采用了这种方式：

<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="BtnFileUpload" runat="server" OnClientClick="$('#ContentPlaceHolder1_FileUpload1').trigger('click'); return false;" Text="Upload" />

我的 Web 表单位于 MasterPage 中，因此我在 Chrome 中调试时必须查看“查看源代码”以获得正确的元素 ID ContentPlaceHolder1_FileUpload1 而不仅仅是 FileUpload1

【讨论】：

【解决方案2】：

您可以使用 jquery 执行此操作，您可以将 fileupload 可见性设置为 none，并且可以通过单击按钮打开 fileuploader

<div runat="server" style="width: 110%">
    <asp:FileUpload style="display:none" ID="fileUpload" runat="server" />
    <asp:Button ID="BtnFileUpload" runat="server" onclick="$('#fileUpload').trigger('click'); return false;" OnClick="BtnFileUpload_Click" Text="Upload" />
</div>

您需要为此引用 jquery。

【讨论】：

它对我不起作用。我尝试添加一个按钮为<asp:Button Text="Browse.." runat="server" id="btnBrowse" OnClientClick ="$('#fileUpload').trigger('click'); return false;" />，但没有任何反应。
你能检查一下控制台中是否有任何javascript错误