jquery implements compact File upload form style _jquery

The article begins by telling you how to make jquery easy to implement Simple File upload form style simple tutorial.

Effect Chart:

Page structure:

<div class= "Uploader white" >
<input type= "text" class= "filename" readonly= "readonly"/>
< Input type= "button" name= "File" class= "button" value= "Browse ..."/> <input type= "
file" size= "
/>" </div>

CSS file style:

. uploader{position:relative; display:inline-block; overflow:hidden; cursor:default; padding:0; margin:10px 0px;-
moz-box-shadow:0px 0px 5px #ddd;
-webkit-box-shadow:0px 0px 5px #ddd;
box-shadow:0px 0px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px; }. filename{Float:left display:inline-block; outline:0 none; height:32px; width:180px; margin:0; padding:8px 10px; over
Flow:hidden;
Cursor:default;
BORDER:1PX solid;
border-right:0; font:9pt/100% Arial, Helvetica, Sans-serif;
Color: #777;
text-shadow:1px 1px 0px #fff;
Text-overflow:ellipsis;
White-space:nowrap;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-radius:5px 0px 0px 5px;
border-radius:5px 0px 0px 5px;
Background: #f5f5f5; Background:-moz-linear-gradient (Top, #fafafa 0, #eee 100%); Background:-webkit-gradient (linear, left top, left bottom,
Color-stop (0%, #fafafa), Color-stop (100%, #f5f5f5)); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #fafafa ', endcolorstr= ' #f5f5f5 ', gradienttype=0);
Border-color: #ccc;
-moz-box-shadow:0px 0px 1px #fff inset;
-webkit-box-shadow:0px 0px 1px #fff inset;
box-shadow:0px 0px 1px #fff inset;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
Box-sizing:border-box; }. button{float:left; height:32px display:inline-block; outline:0 none; padding:8px 12px; margin:0; cursor:pointer; Bor
DER:1PX solid;
Font:bold 9pt/100% Arial, Helvetica, Sans-serif;
-moz-border-radius:0px 5px 5px 0px;
-webkit-border-radius:0px 5px 5px 0px;
border-radius:0px 5px 5px 0px;
-moz-box-shadow:0px 0px 1px #fff inset;
-webkit-box-shadow:0px 0px 1px #fff inset;
box-shadow:0px 0px 1px #fff inset; }. Uploader input[type=file]{position:absolute; top:0; right:0; bottom:0; border:0; padding:0; margin:0; height:30px; cu
Rsor:pointer;
Filter:alpha (opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0; } input[type=button]::-moz-focus-inner{padding:0 border:0 none;-moz-box-sizing:content-box;} Input[type=button:: -webkit-focus-inner{padding:0; border:0 NoNe
-webkit-box-sizing:content-box;} input[type=text]::-moz-focus-inner{padding:0 border:0 none;-moz-box-sizing:content-box;} input[type=text]::-
 webkit-focus-inner{padding:0; border:0 none;-webkit-box-sizing:content-box;}

JavaScript Part code:

<script>$ (function () {
 $ ("input[type=file]"). Change (function () {$ (this). Parents (". Uploader"). FileName "). Val ($ (this). Val ())
 ; $ ("Input[type=file]"). each (function () {
 if ($ (this). val () = "") {$ (this). Parents (". Uploader"). Find (". FileName" ). val ("No file selected ...");}}
 );
</script>

Download Address: jquery implement concise file upload form style

Hope this simple and practical jquery implementation file Upload form style everyone will like, and can be applied to their own projects.