uploadify 自定义按钮样式

Posted 2020-06-20

uploadify是一款不错的JQUERY上传插件，但是FLASH按钮的外挂往往跟我们网页的设计不太搭配。一开始我还试图反编译uploadify.swf来修改其外观，结果发现反编译为FLA后里面没有任何图片资源。

 

原来，这个按钮是用CSS绘制的。代码文件是uploadify.css.

 

打开这个文件后，你会看见CSS设置的按钮样式。OK，现在想修改就很简单了，不论你是写一段新的CSS还是替换成图片都可以的。

 

我懒省事，就直接用图片作为按钮背景了。

 

代码：

.uploadify-button {

background:url(BG_button.PNG );

}

.uploadify:hover .uploadify-button {

background:url(BG_buttonOver.PNG );

}

 

下面就是修改一下按钮上的文字了，默认的是"SELECT FILES"，这对于大部分土鳖客户是无法接受的，当然也是为了跟主页面的文字保持一致，还是要修改成中文的。打开jquery.uploadify.min.js，搜索这个字符串你就会找到它的位置：

 

buttonText:"SELECT FILES",

 

把这里的字符串替换成你想要的就可以了。我是直接设置为空了，因为这个字符串在按钮上的显示位置还得去找怎么调整。所以，直接把文字写在按钮的背景图片里不就行了吗。

 

最后，截图看一下我修改好的样子：