jQuery实现简单的文件上传窗体样式。
设计素描 uff1a
页面结构:
CSS文件样式:
上传{。
职位:相对;
显示:内联块;
溢出:隐藏;
游标:默认值;
填充:0;
保证金:10px 0px;
-moz盒阴影:0px 0px 5px # DDD;
Webkit框阴影:0px 0px 5px # DDD;
盒子的影子:0px 0px 5px # DDD;
-moz边界半径:5px;
WebKit的边界半径:5px;
边界半径:5px;
}
文件名{。
浮点数:左;
显示:内联块;
提纲:0个没有;
身高:32px;
宽度:180px;
保证金:0;
填料:8px 10px;
溢出:隐藏;
游标:默认值;
border: 1px solid;
边界权:0;
字体:9pt / 100% Arial,Helvetica,sans-serif;颜色:# 777;
文字阴影:1px 1px 0px # FFF;
文本溢出:省略号;
白色的空间:不换行;
-moz边界半径:5px 0px 0px 5px;
WebKit的边界半径:5px 0px 0px 5px;
边界半径:5px 0px 0px 5px;
背景:# f5f5f5;
背景:-moz线性梯度(顶部,# fafafa 0%,# EEE 100%);
背景:-webkit-gradient(线性,左上,左下,色站(0%,# fafafa),色站(100%,# f5f5f5));
过滤器:ProgID:DXImageTransform.Microsoft.gradient(startcolorstr =# fafafa ',endcolorstr =# f5f5f5 ',GradientType = 0);
边框颜色:# CCC;
-moz盒阴影:插图0px 0px 1px # FFF;
Webkit框阴影:插图0px 0px 1px # FFF;
盒子的影子:插图0px 0px 1px # FFF;
-moz盒尺寸:边界盒;
Webkit盒尺寸:边界盒;
盒尺寸:边框框;
}
按钮{。
浮点数:左;
身高:32px;
显示:内联块;
提纲:0个没有;
填料:8px 12px;
保证金:0;
光标:指针;
border: 1px solid;
字体:黑体9pt / 100% Arial,Helvetica,sans-serif;
-moz边界半径:0px 5px 5px 0px;
WebKit的边界半径:0px 5px 5px 0px;
边界半径:0px 5px 5px 0px;
-moz盒阴影:插图0px 0px 1px # FFF;
Webkit框阴影:插图0px 0px 1px # FFF;
盒子的影子:插图0px 0px 1px # FFF;
}
。上传输入{类型=文件} {
位置:绝对;
顶部:0;右:0;底部:0;
边界:0;
填充:0;边距:0;
身高:30px;
光标:指针;
滤镜:alpha(不透明度= 0);
-个不透明度:0;
- KHTML不透明度:0;
不透明性:0;
}
输入{类型=按钮}:::-moz焦点内{填充:0;边境:0没有;-moz盒尺寸:内容框;}
输入{类型=按钮}:::- WebKit焦点内{填充:0;边境:0没有;- WebKit盒尺寸:内容框;}
输入{类型=文本}:::-moz焦点内{填充:0;边境:0没有;-moz盒尺寸:内容框;}
输入{类型=文本}:::- WebKit焦点内{填充:0;边境:0没有;- WebKit盒尺寸:内容框;}
代码的Javascript部分:
$(函数(){())
$(输入{类型=文件})(。变化(功能){ $(this)。父母(。上传),(。文件名)。瓦迩($(this)(瓦迩));});
$(输入{文件= })。
如果(美元。Val)(这)(= =){ $(this)。父母(。上传),(。文件名),瓦迩(未选定文件…);}
});
});
下载地址:jQuery实现简单的文件上传窗体样式
希望这个简单实用的jQuery实现文件上传样式,人们会喜欢的,并且可以应用到自己的项目中。