Botão de upload: estilo com css?

Question

É possível substituir o Carregar Botão (que é um gráfico que contém estados acima/para baixo) com um botão simples no estilo CSS?

Answer 1

Consegui encontrar uma solução de trabalho para isso. Aqui está o esboço básico:

• Desative a imagem do botão de uploadidade buttonImg: " "
• Faça o objeto flash transparente wmode:"transparent"
• Usando CSS, posicione um estilo falso button ou a Tag atrás do objeto Flash
• Depois de inicializar o upload, defina a largura e a altura do objeto para corresponder ao botão atrás dele

O objeto flash protegerá o botão por baixo do MouseOver etc. eventos; Então, para obter efeitos de pairar, você precisará tomar algumas etapas adicionais:

• Enrole o botão e o objeto de upload em uma div
• Após a inicialização do upload, defina a largura e a altura do wrapper div para corresponder ao botão
• Você pode então usar o jQuery para lidar com o .hover() Eventos no Wrapper Div e aplique estilos ao botão

Juntando tudo:

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 2

Consegui me safar de algo massivamente mais simples.

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

Provavelmente um pouco mais fácil, agora que temos hideButton: true, não tenho certeza se o @Hherb sabia disso.

ATUALIZAR Eu escrevi esta resposta em julho de 2010. Agora é março de 2013. O HTML5 suporta vários uploads de arquivos. Não use o upload de forma alguma; Eu não.

Answer 3

Por que não apenas colocar um invólucro em torno disso:

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

Estilo assim:

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

E use o seguinte 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>

Funciona para mim;) ... e é claro que você pode usar imagens de fundo em vez das cores.

Answer 4

Exemplo 100% de trabalho. Testado em Firefox, Chrome, Opera e 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

Ler suas respostas me ajudou a resolver este dessa maneira

1. Primeiro embrulhe o <input> dentro de <div class=upload-wrap>
2. Aplique estilos a este novo invólucro (mesmo: Passe o mouse)
3. Use a opção 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    
  });

Dessa forma, você pode estilizar seu botão, mantenha a opção ButtonText disponível. Eu também tive que mexer um pouco com o arquivo .fla para obter a cor e a fonte do meu botão

Answer 6

Uma maneira realmente simples é abrir o arquivo com flash

Você pode alterar a cor de fundo do símbolo uploadbtn

Salve e publique o SWF.

Answer 7

Evan estava muito próximo, mas eu precisava fazer alguns ajustes para que funcionasse corretamente. Aqui está o que eu acabei usando:

CSS:

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

#uploadify:hover { 
background: #B33C00; 
}

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

Você provavelmente quer ajustar a altura aqui porque isso importa. Além disso, alinhei -o da parte superior e da esquerda, em vez de esquerda e direita do outro exemplo. Deixei um pouco de estilo lá como um exemplo de como você pode estilizar o invólucro de botões.

Html:

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

A posição relativa é importante para o botão posicionado absoluto dentro.

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

A largura e a altura são muito importantes, pois determinam a região clicável real dentro do botão Div. Descobri que, sem estes, só é clicável em uma determinada área.

Answer 8

Salam. Para fazer o upload da versão 3.2.1: você pode editar o arquivo da folha de estilo uploadify.css Nesta aula:

• .Uploadify-Button
• .Uploadify: Hover .Uploadify-Button

No meu caso, comento todos os estilos deles para remover o plano de fundo e a borda do botão e o botão padrão foi oculto completamente.