jQuery Uploadify 按钮：样式与 CSS？

Question

提问by Herb Caudill

Is it possible to replace the Uploadifybutton (which is a graphic containing up/over/down states) with a simple CSS-styled button?

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

Answer 1

采纳答案by Herb Caudill

I've been able to come up with a working solution to this. Here's the basic outline:

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

Disable the Uploadify button image buttonImg: " "
Make the flash object transparent wmode:"transparent"
Using CSS, position a fake styled buttonor atag behind the flash object
After initializing Uploadify, set the width and height of the object to match the button behind it

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

The flash object will shield the button underneath it from mouseover etc. events; so to get hover effects, you'll need to take a couple of additional steps:

flash 对象会屏蔽它下面的按钮不受鼠标悬停等事件的影响；所以要获得悬停效果，您需要采取一些额外的步骤：

Wrap both the button and the upload object in a div
After initializing Uploadify, set the width and height of the wrapper div to match the button
You can then use jQuery to handle the .hover()events on the wrapper div and apply styles to the button

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

Putting it all together:

把它们放在一起：

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:

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

回答by Evan Carroll

I was able to get away with something massively more simple.

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

xhtml:

html:

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

css:

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

Probably a little easier, now that we have hideButton: true, not sure if @Herb knew about it.

可能更容易一些，现在我们有hideButton: true，不确定@Herb 是否知道它。

UPDATEI wrote this answer in July of 2010. It's now March of 2013. HTML5 supports multiple file-uploads. Don't use uploadify at all; I don't.

更新我在 2010 年 7 月写了这个答案。现在是 2013 年 3 月。HTML5 支持多个文件上传。根本不要使用uploadify；我不。

Answer 3

回答by sebastian

Why not just put a Wrapper around it like this:

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

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

Style it like this:

样式如下：

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

And use the following script:

并使用以下脚本：

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

Works for me ;) ... and of course you can just use background-images instead of the colors.

对我有用;) ...当然你可以只使用背景图像而不是颜色。

Answer 4

回答by buzoganylaszlo

100% working example. Tested in Firefox, Chrome, Opera and IE6!

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

HTML:

HTML：

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

CSS:

CSS：

#uploadify-wrapper {position:absolute; overflow:hidden}

JavaScript:

JavaScript：

$('#uploadify').uploadify({width:1000, height:1000, hideButton:true, wmode:'transparent', queueID:'uploadify-queue', ...);
$('#uploadify-wrapper').width($('#btn').outerWidth()).height($('#btn').outerHeight());

Answer 5

回答by Vinicio Barrantes

reading your answers helped me to solve this one this way

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

First wrap the <input>into a <div class=upload-wrap>
Apply styles to this new wrapper (even :hover)
Use the hiddeButton option

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

HTML:

HTML：

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

CSS:

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

This way you're able to style your button, an keep the buttonText option available. I also had to mess a little bit with the .fla file to get the color and font for my button

通过这种方式，您可以设置按钮样式，并保持 buttonText 选项可用。我还不得不对 .fla 文件进行一些处理，以获取按钮的颜色和字体

Answer 6

回答by George Filippakos

A really simple way is to open the file with Flash

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

You can then change the background colour of the symbol UploadBtn

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

Save and publish the swf.

保存并发布 swf。

Answer 7

回答by Hawkee

Evan was very close, but I needed to make some adjustments for it to work correctly. Here is what I ended up using:

Evan 非常接近，但我需要进行一些调整才能使其正常工作。这是我最终使用的：

CSS:

CSS：


#uploadify { 
background: #FF5500; 
border-radius: 5px; 
}

#uploadify:hover { 
background: #B33C00; 
}

#uploadify object { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
}

You probably want to fine tune the height here because it does matter. Also, I aligned it from the top and left rather than left and right from the other example. I left a little styling in there as an example of how you can style the button wrapper.

您可能想在这里微调高度，因为它确实很重要。此外，我从顶部和左侧而不是从另一个示例的左右对齐它。我在那里留下了一些样式，作为如何设置按钮包装样式的示例。

HTML:

HTML：

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

The relative position is important for the absolute positioned button inside.

相对位置对于里面的绝对定位按钮很重要。

JavaScript:

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

The width and height are very important as they determine the actual clickable region within the button div. I found that without these it's only clickable in a certain area.

宽度和高度非常重要，因为它们决定了按钮 div 内的实际可点击区域。我发现如果没有这些，它只能在某个区域点击。

Answer 8

回答by Sayed Abolfazl Fatemi

For Uploadify version 3.2.1, You can edit stylesheet file uploadify.cssin this classes:

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

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

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

In my case, I comment all styles of them to remove background and border of button and default button was hide completely.

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

jQuery Uploadify 按钮：样式与 CSS？

提问by Herb Caudill

采纳答案by Herb Caudill

回答by Evan Carroll

回答by sebastian

回答by buzoganylaszlo

回答by Vinicio Barrantes

回答by George Filippakos

回答by Hawkee

回答by Sayed Abolfazl Fatemi

相关推荐

最近更新

标签

jQuery Uploadify 按钮：样式与 CSS？

提问by Herb Caudill

采纳答案by Herb Caudill

回答by Evan Carroll

回答by sebastian

回答by buzoganylaszlo

回答by Vinicio Barrantes

回答by George Filippakos

回答by Hawkee

回答by Sayed Abolfazl Fatemi

相关推荐

jQuery 在 html 表中的第一行之后追加行

jQuery Bootstrap DatePicker，如何设置明天的开始日期？

jQuery 验证：更改默认错误消息

jquery，如何在另一个函数结束后立即运行一个函数

相关推荐

最近更新

标签