<!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. Mysql错误处理

    有几种错误处理的声明形式: § 如果任何错误(不是 后继续执行: DECLARE CONTINUE HANDLER FOR SQLEXCEPTION ; § 如果发生任何错误(不是 NOT FOUND ...

  2. [Ubuntu] Install teamviewer9 on Ubuntu14.04_x64

    The article copied from http://ubuntuhandbook.org/index.php/2013/12/install-teamviewer-ubuntu-1404/ ...

  3. linux下的网络配置

    临时生效的命令: 设置静态ip: ip addr add 192.168.1.2/24 dev eth0 设置网关: ip route add default via 192.168.1.1 启动某个 ...

  4. ANT命令总结（转载）

    1 Ant是什么? Apache Ant 是一个基于 Java的生成工具.生成工具在软件开发中用来将源代码和其他输入文件转换为可执行文件的形式(也有可能转换为可安装的产品映像形式).随着应用程序的生成 ...

  5. PHP 文件上传的综合实例

    1.upload.php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <htm ...

  6. php setcookie 讲解

    1.setcookie 中 $value 值不能为数组 e.g a.$arr = array('hh','bb');setcookie('username',$arr);这种不会生效的 如果确实要放数 ...

  7. Ceph的客户端丢失文件夹的解决办法

    原来的解决办法 更新linux内核,使用linux内核级的mount方式,一段时间后将会在客户端看不到部分长期不使用的文件夹 更正后的解决办法 参考Ceph的客户端安装设置ceph-fuse方式挂载c ...

  8. Linux I2C工具查看配置I2C设备【转】

    转自:http://blog.chinaunix.net/uid-26895763-id-3478882.html 在處理音訊相關的問題時,我通常會找個方法來讀寫codec中register的值.幸好 ...

  9. Maven3.x 插件开发入门

    Maven工具有很多插件,各种各样的插件,让我们开发调试过程中非常方便,但是终究是有你想要的但是现目前插件不能满足的(可能性非常非常低),这个时候就需要使用其他的替代工具,或者是自己来开发一个Mave ...

  10. centos7.1-64bit延时截屏

    centos自带了截屏的软件,而且还能延时截屏. 在桌面左上角的应用程序菜单里: “应用程序”->“工具”->“截图” 设定延时秒数,点击“截图”按钮,开始截图. 完.