botón Uploadify: Estilo con CSS?

Question

¿Es posible sustituir el botón Uploadify (que es un gráfico que contiene hasta más / / abajo estados) con un simple botón CSS de estilo?

Answer 1

He sido capaz de llegar a una solución de trabajo a este. Aquí está el esquema básico:

• Desactivar la imagen del botón buttonImg: " " Uploadify
• Haga la wmode:"transparent" transparente objeto flash
• El uso de CSS, posicionar un button falsa o etiqueta de estilo a detrás del objeto flash
• Después de inicializar Uploadify, establecer el ancho y la altura del objeto para que coincida con el botón detrás de él

El objeto flash protegerá el botón debajo de los eventos mouseover, etc; así que para obtener flotar efectos, tendrá que tomar un par de pasos adicionales:

• Envolver tanto el botón de subida y el objeto en un div
• Después de inicializar Uploadify, establecer la anchura y altura de la div envoltura para que coincida con el botón
• A continuación, puede utilizar jQuery para controlar los eventos .hover() en el div contenedor y aplicar estilos al botón

Poniendo todo junto:

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

yo era capaz de salirse con algo de forma masiva más sencilla.

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

Probablemente un poco más fácil, ahora que tenemos hideButton: true, no estoy seguro si @Herb sabía.

Actualizar que escribí esta respuesta en julio de 2010. Ahora es de marzo de 2013. HTML5 es compatible con varios archivos-archivos. No utilice uploadify en absoluto; Yo no.

Answer 3

¿Por qué no poner una envoltura alrededor de esta manera:

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

Estilo de esta manera:

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

Y el uso de la escritura siguiente:

<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 mí;) ... y, por supuesto, puedes usar background-imágenes en lugar de los colores.

Answer 4

100% ejemplo de trabajo. Probado en Firefox, Chrome, Opera y 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

leer sus respuestas me ayudaron a resolver éste esta manera

1. En primer lugar envolver el <input> en un <div class=upload-wrap>
2. Aplicar estilos a este nuevo envoltorio (incluso: flotar)
3. Utilice la opción 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    
  });

De esta manera usted es capaz de estilo de su botón, una opción de mantener el buttonText disponible. También tenía que meterse un poco con el archivo fla para obtener el color y la fuente para mi botón

Answer 6

Una forma muy sencilla es abrir el archivo con Flash

A continuación, puede cambiar el color de fondo del símbolo uploadBtn

Guardar y publicar el swf.

Answer 7

Evan estaba muy cerca, pero necesitaba hacer algunos ajustes para que funcione correctamente. Esto es lo que terminé usando:

CSS:

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

#uploadify:hover { 
background: #B33C00; 
}

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

Es posible que desee ajustar con precisión la altura aquí porque es importante. También, alineado desde la parte superior ya la izquierda en lugar de la izquierda y la derecha desde el otro ejemplo. Me dejó un poco de estilo de allí como un ejemplo de cómo puede estilo de la envoltura botón.

HTML:

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

La posición relativa es importante para el botón de 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'
});

La anchura y la altura son muy importantes ya que determinan la región se puede hacer clic real dentro de la div botón. He descubierto que, sin los cuales sólo se puede hacer clic en un área determinada.

Answer 8

Salam. para la Versión Uploadify 3.2.1: Puede editar uploadify.css archivo de hoja de estilo en estas clases:

• .uploadify-botón
• .uploadify: hover-.uploadify botón

en mi caso, comento todos los estilos de ellos para eliminar fondo y el borde del botón y el botón por defecto estaba ocultar completamente.