一款效果非常時尚的文件上傳表單域美化特效，下面給出制作的簡要教程。
先上幾個效果飽飽眼福：
使用方法
這些文件上傳域的美化使用的方法都是隱藏原生的<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瀏覽器中獲取默認的邊框外觀。
如果你使用了類似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實現文件上傳表單域美化特效，希望對大家的學習有所幫助。
新聞熱點
疑難解答
