Uploadify How to use a custom button

In the Uploadify plugin comes with a file package with a CSS file uploadidfy.css, in this file defines the Uploadify button style, which is the default style of the button. So how do you use a custom style?

In three steps.

One, specify the background image using the button in the JS code that initializes the Uploadify

 //  upload article with picture  $ (' #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 S            Aved to: ' + data ';         $ ("#pic_container"). HTML (" "

"Buttonimage" is the background image you need to customize. Note: The width and Height properties are the height of the buttons you need to define. Otherwise it will be the default width of the 120*30.

Two, comment out the two styles in uploadify (note, to override their style in a file to use a custom style)

/*. 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; }*/

Third, rewrite these two styles in a page that requires a custom style

{    background-position:-224px-195px;}

The second style is not written here, that is, the style is not defined when hovering the mouse. The location where the background is defined is actually the background picture path defined by "Buttonimage" in the first step.

Uploadify How to use a custom button