本文为大家分享的是一款效果非常酷的文件上传表单域美化特效。有7种不同的美化文件上传域的效果，很时尚，感兴趣的小伙伴们可以参考一下
一款效果非常时尚的文件上传表单域美化特效，下面给出制作的简要教程。
先上几个效果饱饱眼福：
使用方法
这些文件上传域的美化使用的方法都是隐藏原生的元素，然后使用一个
HTML结构
该文件上传域美化效果最基本的HTML结构如下：
CSS样式
首先需要隐藏元素。这里不能使用display: none或visibility: hidden来隐藏它，因为这样做只后，元素里的值不会被上传到服务器端，而且按TAB键时这个元素也不会被找到。隐藏的方法如下：
.inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } 接下来给
.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浏览器中获取默认的边框外观。
如果你使用了类似FastClick（一个在移动触摸设备上消除300毫秒tap-pause的工具库），并且你需要添加一些文本标签，那么按钮将不会正常工作，除非设置了pointer-events: none。
.inputfile + label * { pointer-events: none; }JavaScript
最后需要做的事情是标识用户选择了哪些文件。原生的文件上传域是有这个功能的，但是这里使用的是虚拟的按钮。特效中使用javascript来实现这个功能。
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，那么只有使用原生的文件上传域组件。我们需要做的事情是在元素上添加一个.no-js的class，然后使用Javascript来替换它。
.
js .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .no-js .inputfile + label { display: none; } 以上就是js实现文件上传表单域美化特效，希望对大家的学习有所帮助。
以上就是js实现文件上传表单域美化特效的详细内容，更多请关注0133技术站其它相关文章！
