OnClientClick不适用于Imagebutton隐藏的fileupload

时间:2017-02-24 05:17:52

标签: javascript jquery asp.net file-upload

我正在使用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。请指导我完成这项工作。

1 个答案:

答案 0 :(得分:0)

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

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

}
&#13;
 <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>
&#13;
&#13;
&#13;