Uploadify按钮：CSS风格？
是否可以使用简单的CSS样式按钮替换Uploadify按钮（这是一个包含上/下/下状态的图形）？
我能够通过更简单的东西逃脱。
XHTML：
Upload Pictures CSS：
#uploadify object { position:absolute; left:0; right:0; width:100% }
JavaScript的：
$("#uploadify>div").uploadify({ 'hideButton' : true , 'wmode' : 'transparent' , 'uploader' : '/static/uploadify/uploadify.swf' , 'script' : '/static/uploadify.php' , 'folder' : '/_uploads' , 'multi' : true }) // If you're using jQuery UI. $("#uploadify").button();
可能有点容易，现在我们有hideButton: true ，不确定@Herb是否知道它。
更新我在2010年7月写了这个答案。现在是2013年3月.HTML5支持多个文件上传。 根本不要使用uploadify; 我不。
我已经能够为此提出一个有效的解决方案。 这是基本的大纲：
- 禁用Uploadify按钮图像
buttonImg: " " - 使flash对象透明
wmode:"transparent" - 使用CSS，在flash对象后面放置假造型
button或标签 - 初始化Uploadify后，设置对象的宽度和高度以匹配其后面的按钮
flash对象将屏蔽其下方的按钮以防鼠标等事件; 所以要获得hover效果，你需要采取一些额外的步骤：
- 在div中包含按钮和上传对象
- 初始化Uploadify后，设置包装器div的宽度和高度以匹配按钮
- 然后，您可以使用jQuery处理包装器div上的
.hover()事件，并将样式应用于按钮
把它们放在一起：
HTML
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"); });
为什么不像这样在它周围放一个Wrapper：
风格如下：
.uploadWrapper object {background-color: red;} .uploadWrapper object:hover {background-color: blue;}
并使用以下脚本：
适合我;）…当然你可以使用背景图像而不是颜色。
100％工作的例子。 在Firefox，Chrome，Opera和IE6中测试过！
HTML：
Select files to upload
CSS：
#uploadify-wrapper {position:absolute; overflow:hidden}
JavaScript的：
$('#uploadify').uploadify({width:1000, height:1000, hideButton:true, wmode:'transparent', queueID:'uploadify-queue', ...); $('#uploadify-wrapper').width($('#btn').outerWidth()).height($('#btn').outerHeight());
阅读你的答案帮助我以这种方式解决这个问题
- 首先将
包装到 - 将样式应用于此新包装器（甚至：hover）
- 使用hiddeButton选项
HTML：
CSS：
.upload-wrap{ background:#ff0; width:133px; height:36px; } .upload-wrap:hover{ background:#f00; }
JS
$('#file_upload').uploadify({ 'uploader' : 'uploadify/uploadify.swf', 'script' : 'uploadify/uploadify.php', 'folder' : 'files/images', 'hideButton' : true, 'wmode' : 'transparent', 'buttonText' : 'Upload something' 'width' : 133, 'height' : 36 });
这样您就可以设置按钮的样式，并保持buttonText选项可用。 我还必须使用.fla文件稍微弄清楚我的按钮的颜色和字体
一种非常简单的方法是使用Flash打开文件
然后，您可以更改符号UploadBtn的背景颜色
保存并发布swf。
Evan非常接近，但我需要做一些调整才能正常工作。 以下是我最终使用的内容：
CSS：
#uploadify { background: #FF5500; border-radius: 5px; } #uploadify:hover { background: #B33C00; } #uploadify object { position: absolute; top: 0; left: 0; width: 100%; height: 25px; }
你可能想在这里微调高度，因为它确实很重要。 此外，我从顶部和左侧对齐，而不是从另一个示例左右对齐。 我在那里留下了一些造型，作为如何设置按钮包装样式的示例。
HTML：
Upload Screenshots
相对位置对于内部的绝对定位按钮很重要。
JavaScript的：
$("#uploadify_button").uploadify({ 'hideButton' : true, 'wmode' : 'transparent', 'uploader' : '/static/uploadify/uploadify.swf', 'script' : '/static/uploadify.php', 'folder' : '/_uploads', 'multi' : true, 'width' : '140', 'height' : '25' });
宽度和高度非常重要，因为它们决定了按钮div中的实际可点击区域。 我发现如果没有这些，它只能在某个区域中点击。
萨拉姆。 对于Uploadify版本3.2.1：您可以在此类中编辑样式表文件uploadify.css ：
- .uploadify按钮
- .uploadify：hover.uploadify-button
在我的情况下，我评论他们的所有样式删除按钮的背景和边框，默认按钮完全隐藏。