php文件上传样式,jquery实现简洁文件上传表单样式_jquery

文章开始先告诉大家制作jquery实现简洁文件上传表单样式的简易教程。

效果图：

页面结构：

css文件样式：

.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;

overflow: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;

border: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;

cursor: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部分代码：

希望这款简洁实用的jquery实现文件上传表单样式大家会喜欢，并可以应用到自己的项目中。