<!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. Power Gating的设计(模块)

    Switching Fabric的设计: 三种架构:P沟道的switch vdd(header switch),N沟道的switch vss(footer switch),两个switch. 但是如果 ...

  2. ThinkPHP讲解（一）框架基础

    ThinkPHP框架知识点过于杂乱,接下来将以问题的形势讲解tp(ThinkPHP的简写) 1.tp框架是什么,为什么使用是它? 一堆代码的集合,里边有变量.函数.类.常量,里边也有许多设计模式MVC ...

  3. RobotFrameWork接口报文测试-----（二）demo的升级版

    在上一篇,简单的demo实现了讲xml的数据发送服务器端并取得recvi_buf,然后进行了简单的解析的操作.现在就要解决之前提过的2个问题: 1. 步骤这么多,难道每写一个脚本都要重复一次么? 2. ...

  4. 【ubuntu】首选项和应用程序命令（preference & application）

     gnome-control-center  系统设置  gnome-control-center region  键盘布局  gnome-control-center screen  屏幕  gno ...

  5. 【python cookbook】【字符串与文本】8.编写多行模式的正则表达式

    问题:用正则表达式对一段文本块做匹配,但是希望在进行匹配时能够跨越多行 解决方案: 1.正则表达式添加对换行符的支持: 2.re.compile()函数一个有用的标记-re.DOTALL使得正则表达式 ...

  6. scala简单的文件操作

    1.scala写入文件操作 package com.test import java.io.File import java.io.PrintWriter /** * scala文件写入 */ obj ...

  7. Delphi中CoInitialize之探究

    CoInitialize(LPVOID),它将以特定参数调用CoInitializeEx,为当前单元初始化COM库,并标记协同模式为单线程模式.参数必须为NULL.这是关于OLE和COM的问题. Co ...

  8. WKWebView新特性及JS交互

    引言 一直听说WKWebView比UIWebView强大许多,可是一直没有使用到,今天花了点时间看写了个例子,对其API的使用有所了解,为了日后能少走弯路,也为了让大家更容易学习上手,这里写下这篇文章 ...

  9. dedecms的title怎么优化？

    (1)首页:index.htm 模板:<title>k1,k2,k3 {dede:global.cfg_webname/}</title> 规则:3个关键词+网站名称 示例:& ...

  10. 自己封装的OKhttp请求

    package com.create.qdocumentimtest.rxjavatest; import com.squareup.okhttp.Callback; import com.squar ...