上传按钮：使用 CSS 设置样式？答案

【解决方案1】：

我能够摆脱一些更简单的事情。

xhtml:

<div id="uploadify">                  
  Upload Pictures                     
  <div id="uploadify" type="button" />
</div>

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；我没有。

【讨论】：

很好的答案！但是，有一个小建议 - 您可能希望使用开始和结束标记 ('
'）。当然，如果这个“错误”咬了你，这在一定程度上取决于你的文档类型。无论如何，欲了解更多信息：stackoverflow.com/questions/1411182/…
这是一个很好的解决方案，但我发现我需要将
更改为
以便绝对定位按预期工作。
这个解决方案对我有用。我不喜欢有两个元素具有相同的 id，但我无法让其他任何东西工作。
对齐不正确。只有一小部分按钮是可点击的，并且 webkit 和 mozilla 上的可点击区域之间存在巨大差异。
不要使用uploadify。使用 HTML5。

【解决方案2】：

我已经能够为此提出一个可行的解决方案。以下是基本大纲：

禁用上传按钮图片buttonImg: " "
使flash对象透明wmode:"transparent"
使用 CSS，在 flash 对象后面放置一个伪造的 button 或 a 标签
初始化 Uploadify 后，设置对象的宽度和高度以匹配其背后的按钮

flash 对象将保护其下方的按钮免受鼠标悬停等事件的影响；所以得到悬停效果，您需要采取几个额外的步骤：

将按钮和上传对象包装在一个 div 中
初始化 Uploadify 后，设置 wrapper div 的宽度和高度以匹配按钮
然后您可以使用 jQuery 处理包装 div 上的 .hover() 事件并将样式应用于按钮

把它们放在一起：

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");
});

【讨论】：

干得好。你是一个比我更好的人。祝你好运。我的答案会在 1...2...3.... 后自行删除。
您会认为可以通过 javascript 触发 flash 并消除对这种 hack 的需要。
公平警告：Chrome 无法将元素与position: absolute 正确对齐；我必须删除top 和left 并通过margin-top 和margin-left 硬连线对齐。

【解决方案3】：

为什么不像这样在它周围放一个 Wrapper：

<div class = "uploadWrapper"><input id="file_upload" name="file_upload" type="file" /></div>

这样设置样式：

.uploadWrapper object {background-color: red;}
.uploadWrapper object:hover {background-color: blue;}

并使用以下脚本：

<script type="text/javascript">
$(document).ready(function() {
  $('#file_upload').uploadify({
    'hideButton': true,
    'wmode'     : 'transparent',
    'uploader'  : '/uploadify/uploadify.swf',
    'script'    : '/uploadify/uploadify.php',
    'cancelImg' : '/uploadify/cancel.png',
    'folder'    : '/uploads',
    'auto'      : true
  });
});
</script>

为我工作；） ...当然，您可以只使用背景图像而不是颜色。

【讨论】：

它有效，我忘记将 wmode 设置为透明。我所做的唯一更改是使用对象 id 将样式直接应用于对象，因此我不需要包装器

【解决方案4】：

100% 工作示例。在 Firefox、Chrome、Opera 和 IE6 中测试！

HTML：

<div id="uploadify-wrapper"><div id="uploadify"></div></div>
<span id="btn">Select files to upload</span>
<div id="uploadify-queue"></div>

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());

【讨论】：

【解决方案5】：

阅读您的答案帮助我以这种方式解决了这个问题

首先将<input> 包装成<div class=upload-wrap>
将样式应用到这个新包装器（甚至 :hover）
使用隐藏按钮选项

HTML：

<div class="upload-wrap">
<input id="file_upload" type="file" name="file_upload" />
</div>

CSS：

.upload-wrap{
    background:#ff0;
    width:133px;
    height:36px;
}
.upload-wrap:hover{
    background:#f00;
}

$('#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 文件来获得按钮的颜色和字体

【讨论】：

【解决方案6】：

一个非常简单的方法是用Flash打开文件

然后您可以更改符号 UploadBtn 的背景颜色

保存并发布 swf。

【讨论】：

【解决方案7】：

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：

<div id="uploadify" style="position: relative;">   
  Upload Screenshots
  <div id="uploadify_button" type="button"></div>
</div>

相对位置对于内部的绝对定位按钮很重要。

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 中的实际可点击区域。我发现没有这些，它只能在某个区域内点击。

【讨论】：

【解决方案8】：

对于 Uploadify 版本 3.2.1，您可以在此类中编辑样式表文件 uploadify.css：

.上传按钮
.uploadify:hover .uploadify-button

在我的例子中，我评论了它们的所有样式以删除按钮的背景和边框，并且默认按钮被完全隐藏。

【讨论】：