自定义input file 属性

<label class="input">
<input title="浏览文件" type="file" />浏览…
</label>
<style type="text/css">
.input{display: inline-block;
width: 140px;
height: 50px;
line-height: 50px;
text-align: center;
overflow: hidden;
position: relative;
background-color: #00a1cb;
color: #fafafa;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
border-radius: 1px;
transition:background .3s;
-webkit-transition:background .3s}/*自定义外框样式*/
.input:hover{background-color: #00b5e5}/*鼠标经过样式*/
.input input{opacity: 0;filter:alpha(opacity=0);
font-size: 100px;
position: absolute;
top: 0;
right: 0} /*隐藏默认控件样式*/
</style>

时间： 2024-10-06 13:09:13

自定义input file 属性的相关文章

自定义input file样式

自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #file { display: none;

input:file属性

1.accept 只能选择png和gif图片 <input id="fileId1" type="file" accept="image/png,image/gif" name="file" /> 2.multiple 多文件上传 <input id="fileId2" type="file" multiple="multiple" name=&qu

HTML5的 input:file上传类型控制

一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径. 1.accept 只能选择png和gif图片 <input id="fileId1" type="file" accept="image/png,image/gif" name="

【转】HTML5的 input:file上传类型控制

一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径. 1.accept 只能选择png和gif图片 <input id="fileId1" type="file" accept="image/png,image/gif" name="

在HTML5的 input:file 上传文件类型控制 遇到的问题

1.input:file 属性的介绍  先瞅代码吧 <form> <input type="file" name="pic" accept="image/gif,image.jpg" multiple="multiple"/> </form> accept: 一般是指 上传文件的MIME类型. 文件类型MIME 列表  链接(我个人觉得比较全的地方) multipe: 是指多文件上传 2.工

html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

/** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormData还可以自动帮忙打包文传送件数据,后台通过$_FILES数组接收 说明FormData对象既可以打包发送表单的数据,也可以手动append数据 注意,input Dom对象有一个files属性 十一哥文件数组 **/ <!doctype html> <html> <head&

input[file]标签的accept=”image/*”属性响应很慢的解决办法

转自:http://blog.csdn.net/lx583274568/article/details/52983693 input[file]标签的accept属性可用于指定上传文件的 MIME类型 . <input type="file" name="file" class="element" accept="image/*"> 这段代码在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题,

如何用一张图片代替 &#39;input:file&#39; 上传本地文件??

今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的:  如何用一张图片代替 'input:file' 上传本地文件?? 因为默认的 <input type='file'> 上传文件控件样式特别丑,需要换成自定义的图片,如何实现这个功能?? 也就是,将这个玩意: 换成这样的: 当时我还讲了一下label与input之间的绑定关系,问到这个的时候竟然脑袋短路一时没想到label这玩意儿??label作为一

从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别

背景: 在清空input file标签选中值时,分别用了以下方法,发现有的对有的错: [√]$("#file")[0].value = ""; [√]$("#file")[0].value = null; [×]$("#file").attr("value",""); [×]$("#file").attr("value",null); [√]$(&