首先,我经历了这个 SO 问题 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");
});
关于jquery - 在版本 3.2.1 中使用 css 样式上传按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27484746/