标签：
在Uploadify插件自带的文件包中有一个css文件uploadidfy.css，在这个文件里定义了uploadify按钮的样式，这就是按钮的默认样式。那么怎么使用自定义的样式呢？
分三步。
一，在初始化uploadify的js代码中指定使用按钮的背景图片
//上传文章所带图片 $(‘#upBtn‘).uploadify({ ‘swf‘ : ‘/Public/uploadify/uploadify.swf‘, ‘uploader‘ : ‘/submit/uploadTextImg‘, ‘buttonImage‘ : ‘/Public/img/main.png‘, ‘width‘:88, ‘height‘:24, ‘onUploadSuccess‘ : function(file, data, response) { //alert(‘The file was saved to: ‘ + data); $("#pic_container").html("<img src=‘"+data+"‘>"); } });
"buttonImage"就是你需要自定义的背景图片。注意："width"和”height"属性就是你需要定义的按钮的高宽。否则会是默认的120*30的宽度。
二，注释掉uploadify中的这两个样式（注释，是为了在要使用自定义样式的文件中重写他们的样式)
/* .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; }*/
三，在需要自定义样式的页面，改写这两个样式
.uploadify-button { background-position:-224px -195px; }
这里没有写第二个样式，也就是没有定义鼠标悬浮时的样式。定义背景的位置实际上是第一步中“buttonImage"定义的背景图片路径。
标签：
原文地址：http://www.cnblogs.com/doubilaile/p/4695666.html
