首先,我经历了这个问题
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");
});
