<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文件上传</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<style type="text/css">
.wei_upload{ position:relative; border:1px solid #FFE6E6; overflow:hidden; background:#5DBB5D; display:inline-block; font-size:13px; margin:100px;padding:5px 10px; color:#fff; cursor:pointer;}
.wei_upload:hover{ background:#F9C;}
.wei_upload input{ opacity:0;filter:alpha(opacity=0); position:absolute; right:0; top:0; z-index:10;cursor:pointer; width:100px; height:100px; visibility:hidden;}
</style>

</head>
<body>
<span class="wei_upload" id="wei_upload">
<em>上传</em>
<input type="file" />
</span>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
    var o=document.getElementById("wei_upload");
    var a=o.getElementsByTagName("input")[0];
    o.onclick=function(){
        a.click();    
    }
}
</script>

最近公司有一个项目，需要制作各种表单美化的效果，发现表单美化还真是不好玩，为什么不用原生的呢，原生的结构啊效率啊什么的都是杠杠的呀，不懂

只用css来美化的上传表单按钮（抄的迅雷的）的更多相关文章

  1. 【Flask】 结合wtforms的文件上传表单

    表单中的文件上传 基本的表单渲染,表单类设置等等就不多说了,参看另一个文章即可.但是那篇文章里没有提到对于FileField,也就是上传文件的表单字段是如何处理,后端又是如何实现接受上传过来的文件的. ...

  2. bootstrap上传表单的时候上传的数据默认是0　一定要小心

    bootstrap上传表单的时候上传的数据默认是0 一定要小心

  3. ajax上传表单的俩种方式

    1.用h5对象上传表单(图片) var formData = new FormData(); formData.append("authenticity_token", '1212 ...

  4. 上传漏洞科普[1]-文件上传表单是Web安全主要威胁

    为了让最终用户将文件上传到您的网站,就像是给危及您的服务器的恶意用户打开了另一扇门.即便如此,在今天的现代互联网的Web应用程序,它是一种 常见的要求,因为它有助于提高您的业务效率.在Facebook ...

  5. 原生js封装ajax：传json，str，excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  6. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...

  7. jquery运用FormData结合Ajax异步上传表单，超实用

    首先创建一个formData,其中参数,就是你的form表单,jquery要加0,也可以用document.querySelector("form")得到 var formData ...

  8. layui 图片上传+表单提交+ Spring MVC

    Layui 的上传是最常用的, 不可或缺, 记录一下代码, 以后复制都能用!! 1.前端HTML: <div class="layui-form-item"> < ...

  9. 使用ajax上传表单（带文件）

    在使用form表单的时候上传文件+表单,会使得页面跳转,而在某些时候不希望跳转,只变化页面中的局部信息 通过查找资料,可以使用FormData进行ajax操作. FormData介绍:XMLHttpR ...

随机推荐

  1. LIKE 某个变量

    declare i ); n number; begin i:='%D0FC02EAR11005%'; select po_header_id into n from po_headers_all w ...

  2. Junit单元测试-环境配置

    JUnit是Java单元测试框架,已经在Eclipse中默认安装.目前主流的有JUnit3和JUnit4.JUnit3中,测试用例需要继承TestCase类.JUnit4中,测试用例无需继承TestC ...

  3. web标准

    仔细看看所有的前端招聘要求,几乎所有的都要求对web标准有深刻的理解. web标准,是一系列标准的集合.对前端来说,因为网页是由结构.表现和行为组成.对应的就有结构化标准语言,主要包括XHTML和XM ...

  4. SQL2005中的事务与锁定（二）- 转载

    ------------------------------------------------------------------------ -- Author : HappyFlyStone  ...

  5. 慎用MySQL replace语句

    语法: REPLACE [LOW_PRIORITY | DELAYED] [INTO] tbl_name [PARTITION (partition_name,...)] [(col_name,... ...

  6. iOS 警告窗口

    - (IBAction)buttonPressed:(id)sender {        NSDate *date=self.datePicker.date;    NSString *messag ...

  7. 学习Perl6: slice fastq file

    需求: 只获取 ath 物种的 hairpin 序列 文件格式如下所示,以>打头的为 header,紧跟的为序列[AUCG]+ (Perl5 regexp 格式) #!/usr/bin/env ...

  8. Linux软件管理——yum命令详解

    yum install <softwarename> #安装指定软件 yum remove <softwarename> #卸载指定软件 yum update <soft ...

  9. apache支持中文域名绑定,apache支持中文域名绑定,教你怎样让apache支持中文域名绑定

    摘要:apache支持中文域名绑定,apache支持中文域名绑定,教你怎样让apache支持中文域名绑定,根据本人实际经验,叫你如何让apache支持中文域名绑定,绝对管用的让apache支持中文域名 ...

  10. ecshop简单三部实现导航分类二级菜单

    1.在page_header.lbi对应的位置(你想显示导航的位置)插入 (注意下面的"themes/模板名称/util.php"中的"模板名称"改成你模板文件 ...