由于最近要用到上传功能,以前一直是用jspsmartupload组件上传,一直以来以为jquery插件的界面好炫,并且在web的各类组件中都有不少不一样但功能都很强大的插件,因而搜索了下,选择了uploadify,通过尝试,实现了上传功能,但要求是点击超连接实现上传功能。第一反应我想就是经过css文件来控制的,因而找到uploadify的样式文件uploadify.css,把控制按钮样式的相关css注释掉 css
/* .uploadify-button {
background-color: #505050;
background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #505050),
color-stop(1, #707070)
);
background-position: center top;
background-repeat: no-repeat;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border: 2px solid #808080;
color: #FFF;
font: bold 12px Arial, Helvetica, sans-serif;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
width: 100%;
} */
/* .uploadify:hover .uploadify-button {
background-color: #606060;
background-image: linear-gradient(top, #606060 0%, #808080 100%);
background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #606060),
color-stop(1, #808080)
);
background-position: center bottom;
} */ jquery
加上本身的css控制: web
.uploadify-button {
text-decoration:underline;
color:blue
}
.uploadify:hover .uploadify-button {
text-decoration:underline;
color:green
} jquery插件
界面修改先后以下,固然修改后的不是真正的<a>标签超连接 jsp
demo上传按钮: 插件
修改后: it
假如设置 'buttonText':'select a file to upload...',效果以下: io
鼠标移动文字上面效果 file