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代码
Mar 27 Javascript
Javascript this指针
Jul 30 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
简述Vue中容易被忽视的知识点
Dec 09 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 加密与解密的斗争
2009/04/17 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
php常见的魔术方法详解
2014/12/25 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
Js+XML 操作
2006/09/20 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
动态Axios的配置步骤详解
2018/01/12 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python的面向对象思想分析
2015/01/14 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python