<!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. zw版【转发·台湾nvp系列Delphi例程】HALCON SetGray

    zw版[转发·台湾nvp系列Delphi例程]HALCON SetGray SetGray_Delphi.PNG unit Unit1;interfaceuses Windows, Messages, ...

  2. zw版【转发·台湾nvp系列Delphi例程】HALCON 3D Position Of Circles

    zw版[转发·台湾nvp系列Delphi例程]HALCON 3D Position Of Circles procedure TForm1.action();var ho_Image, ho_Elli ...

  3. Java如何对ArrayList里的元素排序

  4. Openstack的用户登录流程

    openstack的用户登录,需要获得集中权限. token 只需要提供用户名和密码即可获得,接口 http://public_url/tokens method:POST body:{"a ...

  5. Ceph的客户端安装

    Contents [hide] 1 参考 1.1 ceph端口访问控制 1.2 用Kernel方式挂载 1.2.1 安装ELRepo及kernel-lt 1.2.2 修改Grub引导顺序并重启动 1. ...

  6. [转]学习 WCF (6)--学习调用WCF服务的各种方法

    转自:http://www.cnblogs.com/gaoweipeng/archive/2009/07/26/1528263.html 作者这篇博文写得很全面. 根据不同的情况,我们可以用不同的方法 ...

  7. MySQL之对数据库库表的字符集的更改

    数据字符集修改步骤: 对于已有的数据库想修改字符集不能直接通过 "alter database character set *"或 "alter table tablen ...

  8. HDU 5794：A Simple Chess（Lucas + DP）

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=5794 题意:让一个棋子从(1,1)走到(n,m),要求像马一样走日字型并只能往右下角走.里 ...

  9. PHP高级架构技术年度大盘点

    2015年1月的最后一个周末,上海的冬季虽不如北方的雪窖冰天,但腊月的寒风也足以让人猫 在家中不愿出门.可是,在华美达酒店的一个会议室中,却人声鼎沸.春意融融,第三期商派技术沙龙正在火热进行,本期沙龙 ...

  10. 【转】MYSQL入门学习之四：MYSQL的数据类型

    转载地址:http://www.2cto.com/database/201212/175536.html 一.整型  www.2cto.com            整数类型是数据库中最基本的数据类型 ...