FileUpload控件修改

FileUpload正常格式是一个文本框加一个按钮,但是我们有时候会想要自定义按钮的样式,那么我们就需要隐藏一个FileUpload控件,然后自己加一个按钮,点击这个按钮选择上传文件,这里有个地方要注意,FileUpload出于安全考虑,如果是其他按钮触发的他的onclick事件,选择的文件,是无法通过验证的,submit会失败。所以,不能用其他按钮触发FileUpload控件的onclick事件。

那么就要求我们,做的效果是,点击自己添加的按钮,但实际是点击的FileUpload控件的按钮。思路是用自定义显示的覆盖在FileUpload控件上,但是发生点击时,点击的是FileUpload控件。

下面的代码可以实现,至于FileUploadSubmit()这个方法,是选择文件后,触发的js事件,这时候就可以提交服务器了

            <input type="text" id="txt" name="txt">
            <input type="button" οnmοusemοve="FileUploadImage.style.pixelLeft=event.x-60;FileUploadImage.style.pixelTop=this.offsetTop;"
                value="请选择文件" size="30">
            <asp:FileUpload ID="FileUploadImage" runat="server" οnchange="txt.value=this.value;FileUploadSubmit()"
                Style="position: absolute; filter: alpha(opacity=0);" size="1" hidefocus />

如果是IE9的话,换成下面代码

            <input type="text" id="txt" name="txt">
            <input type="button" οnmοusemοve="FileUploadImage.style.pixelLeft=event.x-60;FileUploadImage.style.pixelTop=this.offsetTop+17;"
                value="请选择文件" size="30">
            <asp:FileUpload ID="FileUploadImage" runat="server" Width=50 οnchange="txt.value=this.value;FileUploadSubmit()"
                Style="position: absolute; filter: alpha(opacity=0);" size="1" hidefocus />

因为ie9的相对位置好像不对,可以把filter: alpha(opacity=0);这个删掉,就能看到效果了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值