(C# - GridView) 在代码后面的 LinkButton_Click 上打开隐藏的 FileUpload 对话框答案

【问题标题】：(C# - GridView) Open hidden FileUpload Dialogue on LinkButton_Click in Code Behind(C# - GridView) 在代码后面的 LinkButton_Click 上打开隐藏的 FileUpload 对话框
【发布时间】：2017-02-23 12:38:00
【问题描述】：

我创建了这个LinkButton 在我的GridView：

<asp:LinkButton ID="LinkButtonOpenFile" CssClass="fa fa-upload" runat="server" OnClick="LinkButtonOpenFile_Click"></asp:LinkButton>

在我的 GridView 之外，我创建了一个FileUpload：

<asp:FileUpload ID="FileUpload1" runat="server" Visible="false"/>

我试图让我的LinkButton 使用 Javascript（服务器端和客户端）打开 FileUpload 对话。非他们触发。是因为我的LinkButton 在我的GridView 中吗？

我尝试过的示例：;

客户端和服务器端 JS：

function openFile(){
        $("#FileUpload1").click();
        }

和

protected void LinkButtonOpenFile_Click(object sender, ImageClickEventArgs e)
    {
        Page.ClientScript.RegisterStartupScript(GetType(), "Javascript", "openFile()", true);
    }

关于如何解决此问题的任何建议？

更新：也试过了

<asp:LinkButton ID="LinkButtonOpenFile" CssClass="fa fa-upload" runat="server" OnClientClick="openFile();return false;"></asp:LinkButton>

JS：

 function openFile(){
    $("#FileUpload1").click();
    }

【问题讨论】：

标签： javascript c# asp.net gridview file-upload

【解决方案1】：

我刚刚发现这段代码片段对我有很大帮助：

在你的 html 中做：

<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <span class="file"><!--diesen span kannst du stylen und ist dann anklickbar-->
      Anhänge auswählen
      <input type="file" />
    </span>
  </body>

</html>

将此添加到您的 css 中：

.file {
    position: relative;
    overflow: hidden;
}
.file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

你很高兴 :-)

【讨论】：