OnClientClick 不适用于 Imagebutton 隐藏文件上传

Question

我正在处理 Asp.net 表单，如下所示

<form runat="server" id="form">
                <label>Select Category <span>*</span></label>
                <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem>Mobiles</asp:ListItem>
                    <asp:ListItem>Electronics and Appliances</asp:ListItem>
                    <asp:ListItem>Cars</asp:ListItem>
                    <asp:ListItem>Bikes</asp:ListItem>
                    <asp:ListItem>Furniture</asp:ListItem>
                    <asp:ListItem>General</asp:ListItem>
                </asp:DropDownList>
                <div class="clearfix"></div>
                <label>Ad Title <span>*</span></label>

                <asp:TextBox ID="txt_title" class="phone" runat="server"></asp:TextBox>
                <div class="clearfix"></div>
                <label>Ad Description <span>*</span></label>
                <%--<textarea class="mess" placeholder="Write few lines about your product"></textarea>--%>
                <asp:TextBox ID="txt_Body" class="mess" placeholder="Write few lines about your product" TextMode="multiline" Style="resize: none" Width="770px" Height="150px" Wrap="true" runat="server" Font-Bold="True"></asp:TextBox>
                <div class="clearfix"></div>
                <div class="upload-ad-photos">
                    <label>Photos for your ad :</label>
                    <div class="photos-upload-view">

                        <asp:ImageButton ID="ImageButton1" UseSubmitBehavior="false" OnClientClick="return chooseFile();" ImageUrl="Images/Capture.JPG" runat="server" />

                        <asp:FileUpload ID="FileUploadControl" runat="server" Visible="False" />


                        <div id="messages">
                            <p>Status Messages</p>
                        </div>
                    </div>
                    <div class="clearfix"></div>

                </div>
                <div class="personal-details">

                    <label>Your Name <span>*</span></label>
                    <asp:TextBox ID="txt_name" class="name" runat="server"></asp:TextBox>
                    <div class="clearfix"></div>
                    <label>Your Mobile No <span>*</span></label>

                    <asp:TextBox ID="txt_phn" class="phone" runat="server"></asp:TextBox>
                    <div class="clearfix"></div>
                    <label>Your Email Address<span>*</span></label>

                    <asp:TextBox ID="txt_email" class="email" runat="server"></asp:TextBox>
                    <div class="clearfix"></div>
                    <p class="post-terms">By clicking <strong>post Button</strong> you accept our <a href="terms.html" target="_blank">Terms of Use </a>and <a href="privacy.html" target="_blank">Privacy Policy</a></p>

                    <asp:TextBox ID="post_sub" Text="Post" type="submit" runat="server"></asp:TextBox>
                    <div class="clearfix"></div>
            </form>

我想在使用 JavaScript 单击 Imagebutton 时调用隐藏的文件上传，如下所示：

 <script type="text/javascript">
    function chooseFile() {
        document.getElementById("#FileUploadControl").click();
        alert("grt");
        return false;

    }
</script>

但是，我无法调用该函数，而是重新加载页面，如您所见，我也在该函数中返回 false。请指导我完成这项工作。

Answer 1

您已将 FileUpload 控件的 Visible 属性设置为 false。因此它在客户端不存在。 Visible 属性与 HTML/CSS 中的 display:none 不同。

你应该这样做：

<span style="display: none">
    <asp:FileUpload ID="FileUploadControl" runat="server" />
</span>

最好使用ClientID，而不是硬编码 FileUpload 控件的 ID。

<script type="text/javascript">
    function chooseFile() {
        document.getElementById("<%= FileUploadControl.ClientID %>").click();
        return false;
    }
</script>

Answer 2

当您使用document.getElementById 时，您不应该提及#，因为它已经搜索了id 属性，在您当前的状态下，它会查找id #FileUploadControl，这不是您的元素id。将您的代码更改为：

function chooseFile() {
    document.getElementById("FileUploadControl").click();
    alert("grt");
    return false;

}

 <form runat="server" id="form">
                    <div class="photos-upload-view">

                        <img id="ImageButton1"  OnClick="return chooseFile();" src="https://maxcdn.icons8.com/office/PNG/512/Computer_Hardware/mouse_left_click-512.png" style="widdth:40px;height:40px;" />

                        <input type="file" ID="FileUploadControl" runat="server" style="display:none;" />

                </div>
    
            </form>

Answer 3

是的，第一是您使用 # of you document.getElementById("#FileUploadControl") 这是错误的，您应该在没有 # document.getElementById("FileUploadControl") 的情况下使用它。

第二件事，如果你使用 Visible="False" 属性，它不会呈现 HTML 元素，否则你可以使用以下两种方法。

1. FileUploadControl.Style["visibility"] = "hidden" 在您的后端文件中
2. 使用以下 css 类进行隐藏

 function chooseFile() {
        document.getElementById("FileUploadControl").click();
        alert("grt");
        return false;

    }

  .setDisplayNone {
      display:none;
  }

  <asp:FileUpload ID="FileUploadControl" runat="server" CssClass="setDisplayNone" />