, Beautify the custom upload button

The upload button is really ugly. Today I saw someone else'sArticleAfter finding the information, I thought about it. The result is as follows.

The image is as follows:

CodePaste the file as follows:

 @ {Viewbag. Title = "  Indexinput  "  ; Layout = ""  ;} <! Doctype HTML>  "  Content-Type  " Content ="  Text/html; charsets = UTF-8  " > <Title> input file beautification </title> <style> * {Margin:  0  ; Padding:  0  ;}. Btn_addpic {display: block; position: relative; width: 120px; Height: 28px; overflow: hidden; Border: 1px solid # ebebeb; Background: None repeat scroll  0   0 # F3f3f3; color :#  999999  ; Cursor: pointer; text - Align: center;  Float  : Left; margin - Right: 5px;}. btn_addpic span {cursor: pointer; display: block; line - Height: 28px;}. fileprew {cursor: pointer; position: absolute; top:  0  ; Left: 0  ; Width: 120px; Height: 30px; font -Size: 100px; /*  Increase the clickable area of different browsers  */  Opacity:  0 ; /*  Key Points of implementation  */  Filter: alpha (opacity = 0 ); /*  Compatible with IE */  } </Style>  "  @ URL. Action (  " Indexinput "  ,  " Uploader "  )  " Method = "  Post  " Enctype = " Multipart/form-Data  " > <Div style = "  Height: 28px; margin: 100px;  " > <Div Class = "  Btn_addpic  " > <Span> upload images... </Span> <input tabindex = "  3  " Title = "  Supports JPG, JPEG, GIF, and PNG formats. The file size is smaller than 5 MB. " Size = "  3  "  Name = "  PIC  "   Class = "  Fileprew  " Type = "  File  " Onchange = " Document. getelementbyid ('textname'). value = This. Value  " > </Div> <input type = "  Text  " Id = "  Textname  " Style = "  Height: 28px; Border: 1px solid # f1f1f1  " /> </Div> <br/> <input type = "  Submit " /> </Form> </body> 
 
The CS code is as follows:
 

 
[Httppost] public actionresult indexinput (Int? Page) {httppostedfilebase saaa = request. files ["upfile"]; httppostedfilebase basefile = request. files [0]; string qqfile = path. getfilename (basefile. filename); stream = basefile. inputstream; using (VAR fliestream = new filestream (httpcontext. server. mappath (@ "\ imagenew \") + qqfile, filemode. create) {stream. copyto (fliestream);} return content ("uploaded successfully! ");}