input file
来源:互联网 发布:淘宝详情模板 编辑:程序博客网 时间:2024/04/30 15:34
原始的file控件是这样的:
别以为这个是由一个text和一个button组合成的,它是一个控件,html代码为:
<input type="file" name="file" />
既然这样我们就用一个text和一个button来显示这个file的样式,html代码是这样:
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上传" />
</form>
</div>
外面的一层div是为了给里面的input提供位置参考,因为写样式的时候需要相对定位,使真正的file控件覆盖在模拟的上面,然后隐藏掉file控件(即使file控件不可见),所以css代码是这样的:
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
效果图:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上传" />
</form>
</div>
</body>
</html>
最后留下一个DEMO:点击查看demo
- input file
- input file
- input file
- html5 file上传,input file
- GridView中的 input file
- input file 只读实现
- input file显示问题
- input file样式
- FireFox3中input file
- No input file specified
- input file 上传文件
- input file 浏览器兼容问题
- input file 赋值方法
- input type="file"
- input file隐藏浏览
- No input file specified
- input file 浏览器兼容问题
- 改变input file样式
- 查看表空间使用情况
- gopkg:一种方便的go pakcage管理方式
- 网站如何提升交互体验
- android SQLite数据库相关的操作
- 【比特币】脚本
- input file
- WPF学习笔记(1) 合并资源字典
- C# 补足10位
- .net 开发常见问题解决方式的收藏
- Sprite 3D用法和相关特性详解
- 欧拉回路-基础题
- HTML页面使用js获取项目上下文路径
- 日期选择器精确到分后设置本地通知有延迟数秒的问题
- 148_leetcode_Word Ladder II