定义file input
<div class="inputFileWrapper">
<label for="inputFile">
<input type="file" id="inputFile"/>
<span class="custorm-style">
<span class="left-button">上传头像</span>
<span class="right-text" id="rightText"></span>
</span>
</label>
</div>
.inputFileWrapper label{
display: block;
float: left;
position: relative;
}
.inputFileWrapper input[type="file"]{
position: absolute;
width: 1px;
height: 1px;
clip:rect(0,0,0,0);
}
.inputFileWrapper .custorm-style{
display: block;
width: 390px;
height: 50px;
}
.inputFileWrapper .custorm-style .left-button{
width: 80px;
line-height: 50px;
background: #008ac7;
color: #fff;
display: block;
text-align: center;
float: left;
}
.inputFileWrapper .custorm-style .right-text{
width: 300px;
height: 40px;
line-height: 50px;
display: block;
float: right;
padding: 4px;
border: 1px solid #008ac7;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
<script src="js/jquery-1.11.1.min.js"></script>
<script>
var fileBtn = $("input[type=file]");
fileBtn.on("change", function(){
var index = $(this).val().lastIndexOf("\\");
var sFileName = $(this).val().substr((index+1));
$("#rightText").html(sFileName);
});
</script>
示例:
自定义input file 的样式,
//.val()取的值是d:/userAdmin/uploads/20120515_115146.jpg; .lastIndexOf("\\")从零开始,最后一个\\的位置,所以下面要+1
//substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符,.substr(start,length)
定义file input的更多相关文章
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- Bootstrap文件上传插件File Input的使用
基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...
- bootstrap file input 官方文档翻译
file Input官方文档 中文翻译 file input 特性 1.这个插件会把简单的html文件变成一个更好用的文件选择输入控件,通过一个html的文件输入框,能兼容那些不支持jquery或js ...
- File Input Features
文件输入功能 1.该插件将将一个简单的 HTML 文件输入转换为高级文件选取器控件.将有助于对不支持 JQuery 或 Javascript 的浏览器的正常 HTML 文件输入进行回退. 2.文件输入 ...
- (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...
- Bootstrap File Input的简单使用
安装引入 使用前需要引入其css和js文件, 注意引入路径的问题 <link rel="stylesheet" href="/__PUB__/fileinput/c ...
- 敲代码非常难之logstash之file input插件实现分析
版权声明:本文为横云断岭原创文章,未经博主同意不得转载.微信公众号:横云断岭的专栏 https://blog.csdn.net/hengyunabc/article/details/25665877 ...
- clear & file input & reset & file input
clear & file input & reset & file input Clear <input type="file"> docume ...
- bootstrap File Input 多文件上传插件使用记录(二)删除原文件
在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...
随机推荐
- 算法(Algorithm)是什么?
我们用煎蛋来打个比方.煎蛋的一般步骤是: 1.>取煎锅. 2.>取油. ->我们有油吗? ****有,把油倒入煎锅. ****没有,我们要去买油吗? #########要买,出去买油 ...
- tomcat7 https 成功测试
1,生成证书
- poj 3311 Hie with the Pie(状态压缩dp)
Description The Pizazz Pizzeria prides itself or more (up to ) orders to be processed before he star ...
- AJAX最简单的原理以及应用
Ajax是创建快速动态网页的技术,通过后台与服务器少量的数据交互,是网页实现异步更新.也就是在不整个刷新页面的情况下,可以更新网页中的局部区域. 在原始web应用的模式中: 浏览器 以 h ...
- LR实战之Discuz开源论坛——安装及简介
想了很久,也许是因为这段时间特别闲,从毕业到现在,我的测试职业生涯也近两年了,发现自己越来越喜欢测试领域,也越来越偏向测试开发了,作为一名专业的测试人员,不得不要学习性能测试,而使用LoadRunne ...
- 第四章 Linux环境
程序参数 main函数声明: int main(int argc, char *argv[]) 其中argc是接受到的参数个数,argv是存储参数的字符串数组. 或者声明为: main() 这样也 ...
- javax inect
Spring 3 and JSR-330 @Inject and @Named example By mkyong | September 16, 2012 | Viewed : 86,399 tim ...
- /boot磁盘空间不足,没盘扩展,只好删除旧内核了
[xiejdm@localhost ~]$ uname -r -.el7.x86_64 [xiejdm@localhost ~]$ sudo rpm -qa | grep kernel kernel- ...
- mysql 取得行号后再排序
一.理论准备 Map是键值对的集合接口,它的实现类主要包括:HashMap,TreeMap,Hashtable以及LinkedHashMap等. TreeMap:基于红黑树(Red-Black tre ...
- jquery 项目所用
<script> $(document).ready(function(){ $.ajax({ type:'post', url :'interface.ajax.php', data:{ ...