js實現(xiàn)文件上傳表單域美化特效

更新時間：2015年11月02日 11:52:33 投稿：lijiao

本文為大家分享的是一款效果非常酷的文件上傳表單域美化特效。有7種不同的美化文件上傳域的效果，很時尚，感興趣的小伙伴們可以參考一下

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

先上幾個效果飽飽眼福：

使用方法

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

HTML結(jié)構(gòu)

該文件上傳域美化效果最基本的HTML結(jié)構(gòu)如下：

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

CSS樣式

首先需要隱藏<input>元素。這里不能使用display: none或visibility: hidden來隱藏它，因為這樣做只后，<input>元素里的值不會被上傳到服務(wù)器端，而且按TAB鍵時這個<input>元素也不會被找到。隱藏的方法如下：

.inputfile {
 width: 0.1px;
 height: 0.1px;
 opacity: 0;
 overflow: hidden;
 position: absolute;
 z-index: -1;
}

接下來給<label>元素設(shè)置樣式。這里要將<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;
}

當(dāng)鼠標(biāo)滑過label時需要將光標(biāo)顯示為一個小手的形狀。

.inputfile + label {
 cursor: pointer; /* "hand" cursor */
}

為了制作可以使用鍵盤導(dǎo)航的效果，需要添加下面的代碼。

.inputfile:focus + label {
 outline: 1px dotted #000;
 outline: -webkit-focus-ring-color auto 5px;
}

-webkit-focus-ring-color auto 5px可以在 Chrome，Opera 和 Safari瀏覽器中獲取默認(rèn)的邊框外觀。

如果你使用了類似FastClick（一個在移動觸摸設(shè)備上消除300毫秒tap-pause的工具庫），并且你需要添加一些文本標(biāo)簽，那么按鈕將不會正常工作，除非設(shè)置了pointer-events: none。

<label for="file"><strong>Choose a file</strong></label>    
.inputfile + label * {
 pointer-events: none;
}

JavaScript

最后需要做的事情是標(biāo)識用戶選擇了哪些文件。原生的文件上傳域是有這個功能的，但是這里使用的是虛擬的按鈕。特效中使用javascript來實現(xiàn)這個功能。

<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實現(xiàn)文件上傳表單域美化特效，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: