uploadify 自定义按钮样式

定制Uploadify上传按钮样式

最新推荐文章于 2017-03-29 20:45:01 发布

原创最新推荐文章于 2017-03-29 20:45:01 发布 · 1.2w 阅读

2 ·

CC 4.0 BY-SA版权

HTML/Javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在使用Uploadify-v3.1时定制上传按钮的样式，通过修改源码实现完全自定义按钮的class，摆脱默认样式限制。

uploadify-v3.1 默认的上传按钮样式是 uploadify-button

可以在实例化的时候指定 buttonClass , 比如

$(function() {
    $("#file_upload").uploadify({
        'buttonClass' : 'some-class',
        'swf'         : '/uploadify/uploadify.swf',
        'uploader'    : '/uploadify/uploadify.php' 
    });
});

结果按钮的class变成了 “uploadify-button some-class"

不想要硬塞给我的uploadify-button，怎么办呢？

打开/jquery.uploadify-3.1.js 找到以下代码改一下

// Create the button
var $button = $('<div />', {
	'id'    : settings.id + '-button',
	'class' : 'uploadify-button ' + settings.buttonClass
});

改成这样：

// Create the button
var $button = $('<div />', {
	'id'    : settings.id + '-button',
	'class' : settings.buttonClass != '' ? settings.buttonClass : 'uploadify-button ' + settings.buttonClass
});

这样buttonClass指定什么就是什么了。