上传按钮:CSS风格？

Question

是否可以使用简单的CSS样式按钮替换Uploadify按钮(包含向上/向上/向下状态的图形)？

Answer 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; 我不.

Answer 2

我已经能够为此提出一个有效的解决方案.这是基本的大纲:

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

flash对象将屏蔽其下方的按钮以防鼠标等事件; 所以要获得悬停效果,你需要采取一些额外的步骤:

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

把它们放在一起:

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

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

适合我;)...当然你可以使用背景图像而不是颜色.