Input file beautification, document upload

This article learns to: http://www.haorooms.com/post/input_file_leixing

But will only use, will not do, the UI tears boundless

：

Original:

After beautification:

This mainly uses CSS to beautify the form, and then submits the form with JQ

1.css

<style>. A-Upload {padding:4px 4px 10px 10px;    height:25px; Line-height:20px;    position:relative;    Cursor:pointer; Color: #888;    Background: #fafafa;    border:1px solid #ddd; Border-radius:4px;     /* What ghost * * Overflow:hidden; Display:inline-Block; *Display:inline; *zoom:1 * * What a ghost * /}.a-upload input {position:absolute; Font-size:100px; Right:0; Top:0; Opacity:0; Filter:alpha (Opacity=0);* * What a ghost */
Cursor:pointer
}
. A-Upload:hover
{
Color: #444;
Background: #eee;
Border-color: #ccc;
Text-Decoration:none;* * What a ghost */

</style>

2.html

<divclass="Row Upfile"> <form id="Form1"Enctype="Multipart/form-data"target="_blank"Method="Post"action="~/comm/inexcel.ashx?action=test"> <a href="javascript:;" class="a-upload btn-warning"> <input type="file"Name="file"Id="file"/>Click Upload file</a> <labelclass="Showfilename"></label> </form> </div>

3.Jq operation

$(". A-upload"). On (" Change","input[type= ' file ']", function () {varFilePath = $ ( This). Val (); varExtend = Filepath.substr (Filepath.indexof (".") +1); if(Extend = ="xls") {                $("#form1"). Submit ();//commits will hold parameters in the original form} $ (". Showfilename"). HTML ("File upload error, only supported. XLS (2003)"); });/On binding event is more important, after binding even if the page refresh, JS will not expire

Input file beautification, document upload