使用button触发FileUpload控件的click事件

IvyJung

已于 2023-02-19 20:55:36 修改

阅读量1.2k

点赞数 1

分类专栏： aspx 文章标签： javascript asp.net

于 2023-02-19 20:53:41 首次发布

本文链接：https://blog.csdn.net/Amylia_Jung/article/details/129113918

版权

aspx 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何通过JavaScript和HTML来实现点击button按钮触发FileUpload控件的点击事件，以保持页面样式一致性。在IE和非IE浏览器中分别采用了不同的实现方式，并提供了隐藏FileUpload控件以及用button和TextBox模拟上传文件样式的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击button触发FileUpload控件的click事件

通过点击button按钮触发FileUpload控件，避免因浏览器不同而导致FileUpload控件样式发生变化，影响页面效果。

注意：需使用 < input type=“button” > 标签，< button >标签无法实现。

实现代码

<body>
    <form id="form1" runat="server">
        <div>
            <asp:FileUpload ID="FileUpload1" runat="server" />
            <input id="uploadFile" type="button" name="button" value="选择文件"onclick="javascript: Open_uploadFile();" />        
        </div>
    </form>
</body>
<script type="text/javascript">
    // 选择上传文件
    function Open_uploadFile() {
        var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;//判断是否是IE浏览器
        if (ie) {
            document.getElementById("FileUpload1").click();     // 通过document元素点击FileUpload控件
        }
        else {
            var event = document.createEvent("MouseEvents");//鼠标事件
            event.initEvent("click", true, true);
            document.getElementById("FileUpload1").dispatchEvent(event);
        }
    }
</script>

效果图：
在这里插入图片描述
可对< asp:FileUpload ID=“FileUpload1” runat=“server” /> 添加属性Style=“visibility: hidden; position: absolute;” 实现隐藏控件效果。代码如下：

<asp:FileUpload ID="FileUpload1" runat="server" Style="visibility: hidden; position: absolute;" />

若要完全实现FileUpload控件的样式替代效果，可用button和textbox实现。代码如下：

<body>
    <form id="form1" runat="server">
        <div>
            <asp:FileUpload ID="FileUpload1" runat="server" Style="visibility: hidden; position: absolute;" />
            <input id="uploadFile" type="button" name="button" value="选择文件" onclick="javascript: Open_uploadFile();" />
            <asp:TextBox ID="txtFileUrl" runat="server" ReadOnly="True"></asp:TextBox>
        </div>
    </form>
</body>

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.FileUpload1.Attributes.Add("onchange", "document.getElementById('" + txtFileUrl.ClientID + "').value = this.value");
            }
        }

效果图：
在这里插入图片描述