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 批量上传文件
这几天维护系统,有一个批量上传文件功能,出现了一点小问题 我的笔记本选择要上传的文件很正常 但在测试环境上,别人的电脑上,选择上传文件之后 一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...
随机推荐
- yii 项目根目录下需要有assets目录
yii 项目根目录下需要有assets目录,如果没有,会导致gii失效
- 检测Xcode是否有问题
之前的XCode中毒事件闹得沸沸扬扬,在网上找到检测XCode完整性的方式,有需要的小伙伴试试吧.忘记哪里转的了,愧对原创者 在终端输入 spctl 命令,并带上安装的 Xcode 的路径: spct ...
- 【读书笔记】iOS-ARC-环境下如何查看引用计数的变化
一,新建立一个工程,用于测试引用计数的变化. 二,找到如下路径Build Phases---->Compile Sources---->AppDelegate.m 三,选中AppDeleg ...
- iOS带动画的环形进度条(进度条和数字同步)
本篇写的是实现环形进度条,并带动画效果,要实现这些,仅能通过自己画一个 方法直接看代码 为了方便多次调用,用继承UIView的方式 .m文件 #import <UIKit/UIKit.h> ...
- react学习笔记1
# 1.hello world 学习一个语言,最好的方式,我们需要去官网去查看文档(https://facebook.github.io/react),通过JSFiddle,便可以看到最简单的demo ...
- nexus搭建maven私服
下载nexus 首先,从以下地址下载nexus: http://www.sonatype.com/download-oss-sonatype 选择下载nexus-2.13.0-01-bundle.ta ...
- mac 远程连接服务器
很多刚用mac的同学 可能会纠结,连接远程服务器咋整? 有没有类型windows上的securecrt 其实,完全可以不用: mac自带的终端就可以搞定:终端terminal 如何连接远程服务器? s ...
- python里面出现中文的时候报错 'ascii' codec can't encode characters in position
编码问题,在头部添加 import sys reload(sys) sys.setdefaultencoding( "utf-8" ) http://www.xuebuyuan.c ...
- ADDM Reports bug:Significant virtual memory paging was detected on the host operating system
查看ADDM(数据库版本为ORACLE 10.2.0.5.0)报告时,发现其中有个结论非常不靠谱:Significant virtual memory paging was detected on t ...
- Javascript之旅——第十站:为什么都说闭包难理解呢?
研究过js的朋友大多会说,理解了js的原型和闭包就可以了,然后又说这些都是js的高级内容,然后就又扯到了各种神马的作用域...然后不少 人就会被忽悠的云里雾里...下面我也试着来说说闭包,看我说的这个 ...