上传按钮：用 CSS 设计样式？

Question

是否可以更换 上传 按钮（这是一个包含向上/向上/向下状态的图形）和一个简单的 CSS 样式按钮？

Answer 1

我已经能够为此提出一个可行的解决方案。这是基本轮廓：

• 禁用上传按钮图像 buttonImg: " "
• 使 Flash 对象透明 wmode:"transparent"
• 使用CSS，定位一个假样式 button 或者 a Flash 对象后面的标签
• 初始化Uploadify后，设置对象的宽度和高度以匹配其后面的按钮

Flash 对象将保护其下方的按钮免受鼠标悬停等影响。事件；因此，要获得悬停效果，您需要采取几个其他步骤：

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

把它们放在一起：

超文本标记语言

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

Answer 2

我能够逃脱大量更简单的东西。

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现在是2013年HTML5的三月支持多文件上传。在所有不使用uploadify;我不知道。

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>

对我的作品;） ......当然，你也可以只使用的背景图像，而不是颜色。

Answer 4

100％工作示例。经测试，在火狐，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());

Answer 5

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

1. 首先将其包裹起来 <input> 变成一个 <div class=upload-wrap>
2. 将样式应用到这个新的包装器（甚至：hover）
3. 使用隐藏按钮选项

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 文件进行一些修改才能获取按钮的颜色和字体

Answer 6

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

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

保存并发布SWF。

Answer 7

埃文是非常接近的，但我需要做一些调整才能正常工作。以下是我最后使用：

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内的实际可点击范围的宽度和高度是很重要的。我发现，在没有这些这只是在一定区域内点击。

Answer 8

萨拉姆。对于上传版本 3.2.1：您可以编辑样式表文件 uploadify.css 在本课程中：

• .uploadify-按钮
• .uploadify:悬停 .uploadify-button

就我而言，我评论了它们的所有样式以删除按钮的背景和边框，并且默认按钮完全隐藏。