button + textbox另类FileUpload控件给变量赋值

来源：互联网发布：京东联创软件集团编辑：程序博客网时间：2024/06/05 07:15

使用了这个控件的朋友们想必都知道FileUpload无法给变量赋值。当我们需要将数据库中的文件名呈现在这个控件上时，FileUpload控件在这一点上显得苍白无力。所以就需要重辟新路完成这个FileUpload控件无法完成的功能。

原理：button + textbox组合，伪装一个FileUpload。通过button点击触发隐藏的FileUpload点击事件弹出选择对话框，然后FileUpload的onpropertychange事件监视value的改变。在value改变时JS给textbox赋值。

cs代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class FTPCoding_Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //先将控件隐藏
            this.FileUpload1.Attributes.Add("style", "display:none");
            //监视属性变化，此时主要用于捕捉文件路径的写入值
            this.FileUpload1.Attributes.Add("onpropertychange", "UploadOnpropertychange()");
        }
    }
}

页面代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" language="javascript">
        function fun()
        {

        }

        function UploadOnpropertychange()
        {
            //JS获取上传控件的值，即所上传文件的绝对路径
            var varUploadFile = document.getElementByIdx("FileUpload1").value;
            //将路径值通过split函数切割分成一个数组集合
            //使用这个函数，这个地方主要是为了获取文件名
            var varArray = varUploadFile.split('//');

            //测试
//            for (var i = 0;i < varArray.length;i++)
//            {
//                if (i == varArray.length - 1)
//                {
//                    alert(varArray[i]);
//                }
//            }
            //最后将所需要的文件名赋给文本框
            document.getElementByIdx("txtUploadFile").value = varArray[varArray.length - 1];
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="txtUploadFile" runat="server"></asp:TextBox>
            <input type="button" value="测试" onclick="javascript:document.getElementByIdx('FileUpload1').click();" />
            <asp:FileUpload ID="FileUpload1" runat="server" CssClass="cssfile" />
        </div>
    </form>
</body>
</html>