jquery – 版本3.2.1中的带有css的Style Uploadify按钮

首先,我经历了这个问题 Uploadify button: Style with CSS? ,但它是旧版本.

在Uploadify文档中,他们向我们展示了如何使用png图像更改按钮,我的问题是,是否可以在css中设置按钮的样式？如果是,那么如何在最新版本中完成？

到目前为止我做了什么,

HTML和CSS

<style type="text/css">
    .uploadify-button {
        background-color: transparent;
        border: none;
        padding: 0;
    }
    .uploadify:hover .uploadify-button {
        background-color: transparent;
    }
</style>
<input type="file" name="file_upload" id="file_upload" />

JS

$(function() {
    $("#file_upload").uploadify({
        'buttonImage' : '/uploadify/browse-btn.png','swf'         : '/uploadify/uploadify.swf','uploader'    : '/uploadify/uploadify.PHP'
    });
});

它正是文档建议的,有没有办法用css设置样式按钮,而不是添加一个png图像作为按钮图像

解决方法

HTML

<div class="UploadifyButtonWrapper">
    <a>Upload Files</a>
    <div class="UploadifyObjectWrapper">
       <input type="file" id="Uploadify" name="Uploadify" />
    </div>
</div>

CSS

div.UploadifyButtonWrapper{
    position:relative;
}

/* fake button */
div.UploadifyButtonWrapper a {
    position:absolute; /* relative to UploadifyButtonWrapper */
    top:0;
    left:0;
    z-index:0;
    display:block;
    float:left;
    border:1px solid gray;
    padding:10px;
    background:silver;
    color:black;
}

/* pass hover effects to button */
div.UploadifyButtonWrapper a.Hover {
    background:orange;
    color:white;
}

/* position flash button above css button */
div.UploadifyObjectWrapper {
    position:relative;
    z-index:10;
}

使用Javascript：

$("input.Uploadify",self).uploadify({
    ...
    buttonImg: " ",wmode: "transparent",...
});
var $buttonWrapper = $(".UploadifyButtonWrapper",self);
var $objectWrapper = $(".UploadifyObjectWrapper",self);
var $object = $("object",self);
var $fakeButton = $("a",self);
var width = $fakeButton.outerWidth();
var height = $fakeButton.outerHeight();
$object.attr("width",width).attr("height",height);
$buttonWrapper.css("width",width + "px").css("height",height + "px")
$objectWrapper.hover(function() {
    $("a",this).addClass("Hover");
},function() {
    $("a",this).removeClass("Hover");
});