input file美化,文件上传
此文学习至: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也不会失效
input file美化,文件上传的更多相关文章
- 动态input file多文件上传到后台没反应的解决方法!!!
其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...
- html input file标签的上传文件 注意点
文件上传框 代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxl ...
- jquery的input:type=file实现文件上传
<!DOCTYPE html> <html> <head> <title>html5_2.html</title> <style> ...
- input file标签限制上传文件类型
用 input 的file类型标签上传文件,有时需要限制上传文件类型,添加accept属性可以实现 <input type="file" accept="image ...
- jQuery File Upload 文件上传插件使用一 (最小安装 基本版)
jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...
- jQuery File Upload文件上传插件简单使用
前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...
- jspsmartupload 文件上传让input数据和文件上传同时提交
一.使用原因: 文件上传时,表单的属性中必须要有multipart/form-data,如以下例子: <form name="form_post" class="a ...
- DVWA之File Upload (文件上传漏洞)
目录 Low: Medium: 方法一:抓包修改文件的type 方法二:00截断 High: Impossible : Low: 源代码: <?php if( isset( $_POST[ 'U ...
- IE input file隐藏不能上传文件解决方法
当大神们都在探讨更深层次的问题时,我还在这里转载发些肤浅的问题解决方案.罢了,为了和我一样笨的后来人. 问题: 上传文件时,用<input type="file" /> ...
- input file multiple 批量上传文件
这几天维护系统,有一个批量上传文件功能,出现了一点小问题 我的笔记本选择要上传的文件很正常 但在测试环境上,别人的电脑上,选择上传文件之后 一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...
随机推荐
- 实现微信浏览器内打开App Store链接(已被和谐,失效了)
微信浏览器是不支持打开App Store 页面的,不知道微信为什么这么做.比如你页面写 <a href=”http://itunes.apple.com/us/app/id399608199″& ...
- XMPP学习——1、介绍
XMPP(Extensible Messaging and Presence Protocol,前称Jabber[1])是一种以XML为基础的开放式实时通信协议,是经由互联网工程工作小组(IETF)通 ...
- Android 图片的缩放与旋转
本文实现Android中的图片的缩放效果 首先设计布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res ...
- 【代码笔记】iOS-点击任何处,出现城市
一,效果图. 二,工程目录. 三,代码. //点击任何处,出现城市 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { ...
- MVP模式在Android项目中的使用
以前在写项目的时候,没有过多考虑架构模式的问题,因为之前一直做J2EE开发,而J2EE都是采用MVC模式进行开发的,所以在搭建公司项目的时候,也是使用类似MVC的架构(严格来讲,之前的项目还算不上MV ...
- WPF学习之路(十二)控件(Range控件)
ProgressBar 进度条,主要属性:Minimum\Maximun\Value, IsIndeterminate为True时,进度条会循环运转 <Grid> <Grid.Row ...
- linux下svn命令使用大全(share)
转自:http://blog.chinaunix.net/uid-22566367-id-1965771.html 1.将文件checkout到本地目录 svn checkout path(path ...
- .NET项目开发—浅谈面向接口编程、可测试性、单元测试、迭代重构(项目小结)
阅读目录: 1.开篇介绍 2.迭代测试.重构(强制性面向接口编程,要求代码具有可测试性) 2.1.面向接口编程的两个设计误区 2.1.1.接口的依赖倒置 2.1.2.接口对实体的抽象 2.2.迭代单元 ...
- mysql错误一例:ERROR 1030 (HY000): Got error 28 from storage engine
在使用mysqldump导出一份建库脚本是,发生了下面的错误: 当执行 desc table_name; 时也报错: tag为表名,show index from tag;倒是可以执行. 其实真正的错 ...
- js 添加节点dom
var elemet = document.createElement("p"); var attr=document.createAttribute("align&qu ...