uploadify怎么使用自定义的按钮

在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"定义的背景图片路径。