js实现文件上传表单域美化特效


Posted in Javascript onNovember 02, 2015

一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程。

先上几个效果饱饱眼福:

js实现文件上传表单域美化特效

js实现文件上传表单域美化特效

js实现文件上传表单域美化特效

使用方法

这些文件上传域的美化使用的方法都是隐藏原生的<input type="file">元素,然后使用一个<label>元素来制作美化效果。

 HTML结构

该文件上传域美化效果最基本的HTML结构如下:

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

 CSS样式

首先需要隐藏<input>元素。这里不能使用display: none或visibility: hidden来隐藏它,因为这样做只后,<input>元素里的值不会被上传到服务器端,而且按TAB键时这个<input>元素也不会被找到。隐藏的方法如下:

.inputfile {
 width: 0.1px;
 height: 0.1px;
 opacity: 0;
 overflow: hidden;
 position: absolute;
 z-index: -1;
}

接下来给<label>元素设置样式。这里要将<label>元素制作为一个按钮的样式。

.inputfile + label {
 font-size: 1.25em;
 font-weight: 700;
 color: white;
 background-color: black;
 display: inline-block;
}
 
.inputfile:focus + label,
.inputfile + label:hover {
 background-color: red;
}

当鼠标滑过label时需要将光标显示为一个小手的形状。

.inputfile + label {
 cursor: pointer; /* "hand" cursor */
}

为了制作可以使用键盘导航的效果,需要添加下面的代码。

.inputfile:focus + label {
 outline: 1px dotted #000;
 outline: -webkit-focus-ring-color auto 5px;
}

-webkit-focus-ring-color auto 5px可以在 Chrome,Opera 和 Safari浏览器中获取默认的边框外观。

js实现文件上传表单域美化特效

如果你使用了类似FastClick(一个在移动触摸设备上消除300毫秒tap-pause的工具库),并且你需要添加一些文本标签,那么按钮将不会正常工作,除非设置了pointer-events: none。

<label for="file"><strong>Choose a file</strong></label>    
.inputfile + label * {
 pointer-events: none;
}

JavaScript

最后需要做的事情是标识用户选择了哪些文件。原生的文件上传域是有这个功能的,但是这里使用的是虚拟的按钮。特效中使用javascript来实现这个功能。

<input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />    
var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
 var label = input.nextElementSibling,
 labelVal = label.innerHTML;
 
 input.addEventListener( 'change', function( e )
 {
 var fileName = '';
 if( this.files && this.files.length > 1 )
  fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
 else
  fileName = e.target.value.split( '\\' ).pop();
 
 if( fileName )
  label.querySelector( 'span' ).innerHTML = fileName;
 else
  label.innerHTML = labelVal;
 });
});

 浏览器禁用JavaScript的处理

如果浏览器禁用了JavaScript,那么只有使用原生的文件上传域组件。我们需要做的事情是在<html>元素上添加一个.no-js的class,然后使用Javascript来替换它。

<html class="no-js">
 <head>
  <!-- remove this if you use Modernizr -->
  <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
 </head>
</html>
.
js .inputfile {
 width: 0.1px;
 height: 0.1px;
 opacity: 0;
 overflow: hidden;
 position: absolute;
 z-index: -1;
}
 
.no-js .inputfile + label {
 display: none;
}

以上就是js实现文件上传表单域美化特效,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
canvas 实现中国象棋
Feb 17 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
JavaScript基础之this详解
Jun 04 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
JS常用跨域方法实现原理解析
Dec 09 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
非常实用的12个jquery代码片段
Nov 02 #Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 #Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 #Javascript
纯javascript移动优先的幻灯片效果
Nov 02 #Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 #Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 #Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 #Javascript
You might like
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
Python常见异常分类与处理方法
2017/06/04 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
python实现三次样条插值
2018/12/17 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
python将unicode和str互相转化的实现
2020/05/11 Python
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
毕业生实习鉴定
2013/12/11 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
2015年度党员个人总结
2015/02/14 职场文书
七一表彰大会简报
2015/07/20 职场文书
干部考核工作总结2015
2015/07/24 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
ipad隐藏软件app图标方法
2022/04/19 数码科技