关闭

上传控件美化

204人阅读 评论(0) 收藏 举报

 

两种方法:

 

  1、

                      

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function fclick(obj) {
            with (obj) {
                style.posTop = event.srcElement.offsetTop //设置透明上传框的Y坐标跟模拟按钮的Y坐标对齐
                style.posLeft = event.x - offsetWidth / 2   //设置透明上传框的X坐标为鼠标在X轴上的坐标加上它的宽的一半(确保点击时能点中透明上传框的按钮控件),这里只是提供一种思路,其实还可以更精确的控制它的X坐标范围
            }
        }
</script>
<style type="text/css">
.input{border:1px solid #f60;color:#666666;font:normal 12px Tahoma;height:18px}
.submit{background:#b1df27;color:#fff;border:1px #7ca700 solid}
</style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
<input id="f_file" class="input" value="选择上传文件" > <input type="button" onmouseover="fclick(t_file)" value="浏 览" class="submit">
<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=0);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus>
<input type="submit" value="确 定"  class="submit">

    </div>
    </form>
</body>
</html>

           

2、

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文件域美化模拟</title>
<style type="text/css">
html,body{margin:0px; padding:0px; font-size:12px;}
.typeDiv{background:url(png-0084.png) no-repeat right; width:200px; line-height:22px; margin:30px 0px 0px 0px; color:#FF0000;}
</style>
<script type="text/javascript">
    function Browser() {
        var ua, s, i;
        this.isIE = false;
        this.isNS = false;
        ua = navigator.userAgent.toLowerCase();
        s = "msie";
        if ((i = ua.indexOf(s)) >= 0) {
            this.isIE = true;
            return;

        } s = "netscape6/";
        if ((i = ua.indexOf(s)) >= 0) {
            this.isNS = true;
            return;
        } s = "gecko";
        if ((i = ua.indexOf(s)) >= 0) {
            this.isNS = true;
            return;

        }
    }
    function t() {
        var _v = document.getElementById('tfile'); //修改文件域ID
        var _fv = document.getElementById('valueDiv'); //修改父级DIV的ID
        if (!(document.getElementById('fileinput'))) {
            var _nd = document.createElement("input");
        }
        else {
            var _nd = document.getElementById('fileinput');
        }
        _nd.style.position = "absolute";
        _nd.style.fontSize = "12px";
        _nd.style.color = "#ff6600";
        _nd.style.border = "1px solid #ff6600";
        _nd.style.height = "17px";
        _nd.setAttribute("id", "fileinput");
        _nd.readOnly = true;
        var browser = new Browser();
        if (browser.isNS) {
            _nd.style.margin = "1px 0px 0px 0px";
            _nd.style.width = "150px";
            _nd.style.top = _fv.offsetTop;
            _nd.style.left = _fv.offsetLeft;
        }
        if (browser.isIE) {
            var box;
            var doc = document;
            box = _fv.getBoundingClientRect();
            var scrollTop = Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
            var scrollLeft = Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft);
            _nd.style.margin = "-1px 0px 0px 0px";
            _nd.style.width = "150px";
            _nd.style.top = box.top + scrollTop;
            _nd.style.left = box.left + scrollLeft;

        }
        _v.parentNode.insertBefore(_nd, _v);
        _nd.value = _v.value;
    }
    if (window.addEventListener)
        window.addEventListener("load", t, false);
    else if (window.attachEvent)
        window.attachEvent("onload", t);
    else
        alert("请使用Ie浏览器5.5以上或者Firefox浏览器");
</script>
</head>
<body>
<div style="margin:0 auto; width:780px;border:1px solid #ccc; padding:10px 0px 10px 30px ;">
<div class="typeDiv" id="valueDiv"><input type="file" onchange="t()" id="tfile" name="file" style="filter:Alpha(opacity=00);opacity:0.0;width:100%;" /></div>
</div>
</body>
</html>

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:160758次
    • 积分:3799
    • 等级:
    • 排名:第8421名
    • 原创:235篇
    • 转载:31篇
    • 译文:5篇
    • 评论:9条
    最新评论