input file美化,文件上传
2024-10-16 21:30:32
此文学习至:http://www.haorooms.com/post/input_file_leixing
然而只会用,不会做,UI泪茫茫
效果图:
原图:
美化后:
此主要用css美化表单,然后用Jq提交表单
1.css
<style> .a-upload { padding: 4px 4px 10px 10px; height: 25px; line-height: 20px; position: relative; cursor: pointer; color: #; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; /* 什么鬼 */ overflow: hidden; display: inline-block; *display: inline; *zoom: 1 /* 什么鬼 */ } .a-upload input { position: absolute; font-size: 100px; right: ; top: ; opacity: ; filter: alpha(opacity=; background: #eee; border-color: #ccc; text-decoration: none ; /* 什么鬼 */
} </style>
①border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。
提示:该属性允许您为元素添加圆角边框!
②z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
③ filter:http://www.w3cplus.com/css3/ten-effects-with-css3-filter
④text-decoration:http://www.w3school.com.cn/cssref/pr_text_text-decoration.asp
2.html
<div class="row upFile"> <form id="form1" enctype="multipart/form-data" target="_blank" method="post" action="~/comm/inexcel.ashx?action=test"> <a href="javascript:;" class="a-upload btn-warning"> <input type="file" name="file" id="file" />点击上传文件 </a> <label class="showFileName"></label> </form> </div>
3.Jq操作
$(".a-upload").on("change", "input[type='file']", function () { var filePath = $(this).val(); ); if (extend == "xls") { $("#form1").submit();//提交会保持原form中的参数 } $(".showFileName").html("文件上传错误,只支持.xls(2003)"); }); / on的绑定事件比较重要,绑定后即使页面刷新,js也不会失效
最新文章
- 将 java 项目打包成可运行的 jar 包(main 函数带参数),并上传到 linux 服务器上运行
- [转载]卡尔曼滤波器及其基于opencv的实现
- Matlab中fsolve传递系数变量
- javascript实用技巧,js小知识
- SQL Server数据库还原:";因为数据库正在使用,所以无法获得对数据库的独占访问权";
- php之面向对象、构造函数、析构函数
- 更换ubuntu apt-get 源
- [MAC OSX - 1] OSX10.10不能安装JKD8,不能使用eclipse
- readonly 与 const
- C#基础学习心得(一)
- hdu 4681 string
- 关于innodb purge thread和master thread
- flex中日期的格式化
- java 多线程(总结)
- Explain
- k8s集群监控(十一)--技术流ken
- SElinux安全子系统---学习
- Navicat 或者Java的JDBC通过SSH Tunnel连接MySQL数据库
- 双击启动tomcat中的startup.bat闪退原因及解决方法
- js查漏补缺【未完】