一个非常流行的文件上传表单域美化效果，下面给出一个简短的教程。

第一个让我们眼前一亮的效果：






使用方法

美化文件上传的方法是隐藏本地元素，然后使用元素来美化效果。

HTML结构

上载域美化文件的最基本HTML结构如下：





选择一个文件



css样式

第一个需要隐藏元素。你不能使用显示：没有或可见性：隐藏来隐藏它，因为在那之后，元素中的值不会上传到服务器端，并且不会根据tab键找到元素。隐藏的方法如下所示：




{输入。
宽度：0.1px；
身高：0.1px；
不透明性：0；
溢出：隐藏；
位置：绝对；
Z指数：1；
}



然后设置元素的样式。




{输入+标签。
字体大小：1.25em；
字体重量：700；
颜色：白色；
背景颜色：黑色；
显示：内联块；
}

输入：专注+标签，
{输入+标签：悬停。
背景颜色：红色；
}



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




{输入+标签。
光标：指针指针；
}




为了利用键盘导航的效果，您需要添加以下代码。




{输入：专注+标签。
概述：1px点缀# 000；
概述：WebKit的聚焦环的颜色自5px；
}



WebKit的聚焦环的颜色自5px可以在Chrome中，默认的边框外观的歌剧，和Safari浏览器。




如果你使用的工具库，像FastClick（工具库中消除移动触摸设备300毫秒点击暂停），你需要添加一些文本标签，按钮会除非指针事件的工作：没有设置。




选择一个文件
+ * {输入标签。
指针事件：无；
}


Javaｓｃｒｉｐｔ

做的最后一件事是确定哪些文件已经由用户选择。本地文件上传域都有这个功能，但虚拟按钮是用来here.javaｓｃｒｉｐｔ用于特殊效果来实现此功能。





无功输入= document.queryselectorall（'输入'）；
array.prototype.foreach.call（输入功能（输入））
{
标签= input.nextelementsibling VaR，
labelval = label.innerhtml；

Input.addEventListener（‘变'，功能（E））
{
文件；
如果（this.files this.files.length > 1）
文件名=（this.getattribute（'data-multiple-caption）| |），（{ }代替数，这个文件长度）；
其他的
文件名= e.target.value.split（大众）（）；

如果（文件名）
label.queryselector（'span）.innerHTML =文件名；
其他的
label.innerhtml = labelval；
}）；
}）；



浏览器禁用Javaｓｃｒｉｐｔ的处理。

如果浏览器禁用Javaｓｃｒｉｐｔ，那么只使用本地文件上传域组件，我们需要在元素上添加一个不需要js的类，然后用Javaｓｃｒｉｐｔ替换它。










。


JS。inputfile {
宽度：0.1px；
身高：0.1px；
不透明性：0；
溢出：隐藏；
位置：绝对；
Z指数：1；
}

no-js.inputfile +标签{。
显示：无；
}


以上是js文件上传窗体域美化效果，希望对大家的学习有所帮助。