<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的更多相关文章

  1. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  2. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

  3. bootstrap file input 官方文档翻译

    file Input官方文档 中文翻译 file input 特性 1.这个插件会把简单的html文件变成一个更好用的文件选择输入控件,通过一个html的文件输入框,能兼容那些不支持jquery或js ...

  4. File Input Features

    文件输入功能 1.该插件将将一个简单的 HTML 文件输入转换为高级文件选取器控件.将有助于对不支持 JQuery 或 Javascript 的浏览器的正常 HTML 文件输入进行回退. 2.文件输入 ...

  5. (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...

  6. Bootstrap File Input的简单使用

    安装引入 使用前需要引入其css和js文件, 注意引入路径的问题 <link rel="stylesheet" href="/__PUB__/fileinput/c ...

  7. 敲代码非常难之logstash之file input插件实现分析

    版权声明:本文为横云断岭原创文章,未经博主同意不得转载.微信公众号:横云断岭的专栏 https://blog.csdn.net/hengyunabc/article/details/25665877 ...

  8. clear & file input & reset & file input

    clear & file input & reset & file input Clear <input type="file"> docume ...

  9. bootstrap File Input 多文件上传插件使用记录(二)删除原文件

    在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...

随机推荐

  1. JavaScript 输入验证器工具

    前注:在数据添加的时候很多地方都会涉及到数据的合法性验证,所以有必要提炼成为一个工具.今天偶然间点错网页,弹出一个游戏界面,本来是想看怎么实现的背景音乐的加载的,结果看到一个注册页面的验证JS,所以这 ...

  2. Windows多线程同步系列之四-----信号量

    信号量说实话自己没怎么使用过.书上大概这样说,信号量设置一个资源访问计数.当该计数值大于0的时候,该信号量对象 为有信号状态,当该计数值等于0的时候,该信号量对象为无信号状态. 我们来查几个主要的AP ...

  3. 【LeetCode练习题】Maximum Depth of Binary Tree

    Maximum Depth of Binary Tree Given a binary tree, find its maximum depth. The maximum depth is the n ...

  4. mongodb导入导出备份恢复

    mongodb数据库同样离不开必要的维护,如备份.恢复.导入.导出. 其实备份和恢复比导入和导出要方便些,而且一般不会出错,所以大部分时候使用备份和恢复操作就可以了 1. 备份Mongodb mong ...

  5. javax.mail用smtp服务器发送带附件的邮件

    jar包: javax.mail-1.5.5.jar maven配置: <dependency> <groupId>com.sun.mail</groupId> & ...

  6. 关于《平安iOS面试》小结

    面了下平安好医生iOS职位,结果不是很理想,也就是GG.写此文的目的在于,时刻提醒自己应该学到老,不要安于现状.也给那些以后去面试的coder一些"剧透"! 一.第一轮 妹子 面试 ...

  7. Linux使用技巧9--用dpkg管理你的软件

    dpkg(package manager for Debian): debian体系中的包管理工具. Commands: -i|--install <.deb file name> ... ...

  8. mysql的基本使用方法

    创建数据库:create database [if not exist]name [character set 编码方式 collate 校对规则] 显示库的创建信息:show create data ...

  9. ASP.NET通用权限组件思路设计

    开篇 做任何系统都离不开和绕不过权限的控制,尤其是B/S系统工作原理的特殊性使得权限控制起来更为繁琐,所以就在想是否可以利用IIS的工作原理,在IIS处理客户端请求的某个入口或出口通过判断URL来达到 ...

  10. js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...