jquery - modificar - cambiar propiedad css javascript

Botón subir: ¿Estilo con CSS?

Question

¿Es posible reemplazar el botón Uploadify (que es un gráfico que contiene los estados arriba / abajo / abajo) con un simple botón de estilo CSS?

Answer 1

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

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

Estilo así:

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

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

Answer 2

Ejemplo de trabajo 100%. Probado en 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 3

Evan estaba muy cerca, pero necesitaba hacer algunos ajustes para que funcionara 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;
}

Probablemente quieras ajustar la altura aquí porque sí importa. Además, lo alineé desde la parte superior e izquierda en lugar de a la izquierda y la derecha del otro ejemplo. Dejé un poco de estilo allí como un ejemplo de cómo se puede diseñar la envoltura de 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 posicionado absoluto en el interior.

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

El ancho y la altura son muy importantes ya que determinan la región real en la que se puede hacer clic dentro del botón div. Descubrí que sin estos solo se puede hacer clic en un área determinada.

Answer 4

He podido llegar a una solución de trabajo para esto. Aquí está el esquema básico:

• Desactiva el botón de imagen buttonImg: " "
• Hacer el objeto flash transparente wmode:"transparent"
• Usando CSS, coloque un button estilo falso o a etiqueta detrás del objeto flash
• Después de inicializar Uploadify, establezca la anchura y la altura del objeto para que coincida con el botón detrás de él

El objeto flash protegerá el botón que está debajo de los eventos de mouseover, etc. por lo tanto, para obtener los efectos de desplazamiento, deberá realizar un par de pasos adicionales:

• Envuelve el botón y el objeto de carga en un div
• Después de inicializar Uploadify, establezca el ancho y el alto del div contenedor para que coincida con el botón
• Luego, puede usar jQuery para manejar los eventos .hover() en el envoltorio div y aplicar estilos al botón

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

Leer sus respuestas me ayudó a resolver esto de esta manera.

1. Primero envuelva el <input> en un <div class=upload-wrap>
2. Aplicar estilos a este nuevo envoltorio (incluso: mover)
3. Usa 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, puede diseñar su botón, y mantener la opción buttonText disponible. También tuve que meterme un poco con el archivo .fla para obtener el color y la fuente de mi botón

Answer 6

Pude salirme con algo mucho más simple.

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 de si @Herb lo sabía.

ACTUALIZACIÓN Escribí esta respuesta en julio de 2010. Ahora es marzo de 2013. HTML5 admite múltiples cargas de archivos. No uses uploadify en absoluto; Yo no.

Answer 7

Salam para Uploadify Versión 3.2.1: Puede editar el archivo uploadify.css en esta clase:

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

en mi caso, comento todos los estilos para eliminar el fondo y el borde del botón y el botón predeterminado se ocultó completamente.

Answer 8

Una forma realmente sencilla es abrir el archivo con Flash.

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

Guarda y publica el swf.