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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
vue watch关于对象内的属性监听
Apr 22 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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python中Selenium模块的使用详解
2020/10/09 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
特此通知格式
2015/04/27 职场文书
增值税发票丢失证明
2015/06/19 职场文书
文艺委员竞选稿
2015/11/19 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
初中美术教学反思
2016/02/17 职场文书
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android