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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
非常实用的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函数)
2006/10/09 PHP
操作Oracle的php类
2006/10/09 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
xml和web特殊字符
2009/04/28 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
jquery等待效果示例
2014/05/01 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
python中os.remove()用法及注意事项
2021/01/31 Python
启动仪式策划方案
2014/06/14 职场文书
2015年入党决心书
2015/02/05 职场文书
普通员工辞职信范文
2015/05/12 职场文书
安全第一课观后感
2015/06/18 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL