上传控件美化

原创 2012年03月26日 15:42:20

 

两种方法:

 

  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>

 

html+css上传文件控件美化

html+css美化上传文件控件 上传文件 label{ display:inline-block; width:160px; height:4...
  • echo008
  • echo008
  • 2016年05月16日 15:01
  • 2972

C#自定义控件之-winform美化

对于系统自带的窗体,博主实在不敢恭维,测试时使用方便快捷,但真正项目中无法使用,只因不美观的外表,每次都很头疼窗体的美化,这里列出一些需要解决的问题和自己收集到的解决方法,如有错误请指出。 废话不多说...
  • lcj401175209
  • lcj401175209
  • 2016年10月28日 09:07
  • 5344

美化input文件上传按钮

前言:用过文件上传的同学都知道,html自带的上传按钮样子很丑,如果我们写的界面比较炫的话,在加上个原始的按钮,界面就会大打折扣,所以美化上传按钮是很有必要的。一。实现方法 在按钮的外围包裹一个di...
  • Picking_up_stones
  • Picking_up_stones
  • 2016年12月23日 17:36
  • 1620

HTML 文件上传框美化

点击这里上传文件 选择文件 CSS样式1:/*a upload */ .a-upload { padding: 4px 10px; height: 20px; ...
  • dong_18383219470
  • dong_18383219470
  • 2016年11月04日 16:23
  • 1132

Skin控件 C# Winform窗体美化控件

Skin控件 C# Winform窗体美化控件     c# 程序皮肤控件2008-09-12 16:16Visual Studio 2005工具箱上右击选择“选择项”,慢慢等...在弹出的...
  • llxlett
  • llxlett
  • 2013年01月17日 12:59
  • 2017

css input上传按钮美化

css input[type=file] 样式美化,input上传按钮美化 我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox...
  • json_ligege
  • json_ligege
  • 2016年11月21日 19:01
  • 1367

用MFC做漂亮界面之美化标题(使用静态控件)

上次,我们已经为我们的对话框添加了关闭按钮,最小化按钮,今天,我们一起为它添加一个标题。因为我们的对话框没有标题栏,所以我们需要添加一个静态控件(Static),来显示标题。 首先我们为对话框添加一...
  • u011711997
  • u011711997
  • 2016年09月19日 12:09
  • 3544

C#自定义控件之-TabControl美化

使用C#开发了很多桌面应用程序,一直苦恼于系统自带的控件太丑,网上资源又太乱,因此为了以后自己使用和方便他人从这篇博文开始,陆续把自己收集整理的各类控件分享给大家一块学习,有不对的地方还请大家指出。不...
  • lcj401175209
  • lcj401175209
  • 2016年10月27日 11:18
  • 6315

CSS美化上传按钮并获取上传文件路径

上传功能很常见了,就是一个 input file 功能。 但是默认的上传很丑啊有没有,所以网上也有很多美化的 css 文章,但是很多也只是美化以下按钮而已,今天遇到一个问题就是还要显示上传文件的...
  • binyao02123202
  • binyao02123202
  • 2015年11月23日 15:34
  • 6365

Qt控件美化(基本使用)

级联样式表 (CSS) 包含应用于网页中的元素的样式规则。CSS 样式定义元素的显示方式以及元素在页中的放置位置。可以创建一个通用规则,只要 Web 浏览器遇到一个元素实例,或遇到一个分配给某个特定样...
  • wgylyz
  • wgylyz
  • 2015年07月24日 11:50
  • 207
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:上传控件美化
举报原因:
原因补充:

(最多只允许输入30个字)