上传按钮：可以用CSS样式来美化吗？

Question

是否可以用一个简单的CSS样式按钮来替换Uploadify按钮（它是一个包含up/over/down状态的图形）？

- Herb Caudill

Answer 1

我能够用更简单的方法解决问题。

xhtml:

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

样式表：

#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；我已经不再使用它了。

- Evan Carroll

---

很棒的答案！然而，我有一个小建议 - 你可以使用起始和结束标签（'<div id="uploadify" type="button" ></div>'）而不是复合标签（'<div id="uploadify" type="button" />'）。当然，这取决于你的文档类型是否会受到影响。无论如何，如果需要更多信息，请参考：https://dev59.com/B3M_5IYBdhLWcg3wWR2V - rinogo

这是一个很好的解决方案，但我发现我需要将<div id="uploadify">更改为<div id="uploadify" style="position:relative;">，以便绝对定位按预期工作。 - saille

这个解决方案对我有用。我不喜欢有两个具有相同id的元素，但我无法让其他任何东西起作用。 - Torben Junker Kjær

对齐方式不正确。只有按钮的一小部分可点击，而且在 Webkit 和 Mozilla 上可点击区域之间存在明显差异。 - Hawkee

不要使用uploadify，改用HTML5。 - Evan Carroll

Answer 2

我已经想出了一个可行的解决方案。以下是基本概述：

• 禁用Uploadify按钮图像 buttonImg：" "
• 使Flash对象透明 wmode："transparent"
• 使用CSS，将虚假的样式化button或a标签放置在Flash对象后面
• 初始化Uploadify后，将对象的宽度和高度设置为与其后面的按钮相同

Flash对象将屏蔽其下方的按钮不受鼠标事件的影响; 因此，要获取悬停效果，您需要执行一些其他步骤：

• 将按钮和上传对象都包装在一个div中
• 初始化Uploadify后，将包装器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");
});

- Herb Caudill

---

干得好。你比我更优秀。祝你好运。我的回答将在1...2...3...自动删除。 - Sky Sanders

你可能会认为通过JavaScript触发闪光是可行的，并且不需要这种破解方法。 - Evan Carroll

提醒：Chrome不能正确对齐具有“position: absolute”的元素；我不得不删除“top”和“left”，并通过“margin-top”和“margin-left”硬编码对齐。 - Liz

Answer 3

为什么不像这样把它包装起来：

？

这样做的好处是可以在不影响现有代码的情况下，对其进行修改和扩展。

<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>

对我来说没问题 ;) ... 当然，您也可以使用背景图片而不是颜色。

- sebastian

---

它可以工作了，我忘记将wmode设置为透明。我唯一做的更改是直接使用对象ID将样式应用于对象，因此我不需要包装器。 - deb

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

- buzoganylaszlo

Answer 5

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

- Hawkee

Answer 6

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

1. 首先将 <input> 包装在一个 <div class=upload-wrap> 中
2. 对这个新包装器应用样式（甚至可以是 :hover）
3. 使用 hiddeButton 选项

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

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文件中进行一些调整，以获得我的按钮的颜色和字体。

- Vinicio Barrantes

Answer 7

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

• .uploadify-button
• .uploadify:hover .uploadify-button

在我的情况下，我注释掉了它们的所有样式，以删除按钮的背景和边框，并完全隐藏默认按钮。

- Sayed Abolfazl Fatemi

Answer 8

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

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

保存并发布swf文件。

- George Filippakos