一款效果非常時尚的文件上傳表單域美化特效，下面給出制作的簡要教程。

先上幾個效果飽飽眼福：

使用方法

這些文件上傳域的美化使用的方法都是隱藏原生的元素，然后使用一個元素來制作美化效果。

@H_502_27@?HTML結構

該文件上傳域美化效果最基本的HTML結構如下：

Choose a file

@H_502_27@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。

Choose a file

.inputfile + label * {

pointer-events: none;

}

@H_502_27@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;

});

});

@H_502_27@瀏覽器禁用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實現文件上傳表單域美化特效全部內容，希望文章能夠幫你解決js實現文件上傳表單域美化特效所遇到的程序開發問題。

如果覺得編程之家網站內容還不錯，歡迎將編程之家網站推薦給程序員好友。

本圖文內容來源于網友網絡收集整理提供，作為學習參考使用，版權屬于原作者。

小編個人微信號 jb51ccc

喜歡與人分享編程技術與工作經驗，歡迎加入編程之家官方交流群！

總結

以上是生活随笔為你收集整理的html js文件域val,js实现文件上传表单域美化特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。