Pulsante Uploadify: stile con i CSS?

Question

E 'possibile sostituire il pulsante Uploadify (che è un grafico contenente fino / oltre / giù Uniti) con un semplice pulsante CSS stile?

Answer 1

Sono stato in grado di trovare una soluzione di lavoro per questo. Ecco lo schema di base:

• Disabilita l'immagine buttonImg: " " tasto Uploadify
• Fare l'oggetto Flash wmode:"transparent" trasparente
• Utilizzando i CSS, posizionare un falso stile button o tag a dietro l'oggetto Flash
• Dopo l'inizializzazione Uploadify, impostare la larghezza e l'altezza dell'oggetto in modo che corrisponda il pulsante dietro di esso

L'oggetto flash schermare il pulsante sottostante da eventi mouseover, ecc; in modo da ottenere hover effetti, avrete bisogno di prendere un paio di passaggi aggiuntivi:

• Avvolgere sia il pulsante e l'oggetto di upload in un div
• Dopo l'inizializzazione Uploadify, impostare la larghezza e l'altezza del div wrapper per abbinare il pulsante
• È possibile quindi utilizzare jQuery per gestire gli eventi .hover() sul div involucro e applicare stili per il pulsante

Mettere tutto insieme:

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

Sono stato in grado di farla franca con qualcosa di più in maniera massiccia semplice.

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

Probabilmente un po 'più facile, ora che abbiamo hideButton: true, non so se @Herb lo sapeva.

Aggiorna ho scritto questa risposta nel luglio del 2010. E 'giunto il marzo del 2013. HTML5 supporta più file-upload. Non usare uploadify a tutti; Io non lo faccio.

Answer 3

Perché non basta mettere un wrapper in questo modo:

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

Style in questo modo:

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

E utilizzare il seguente 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>

lavora per me;) ... e, naturalmente, si può semplicemente utilizzare sfondo-immagini al posto dei colori.

Answer 4

100% esempio funzionante. Testato in 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

leggere le tue risposte mi ha aiutato a risolvere questo in questo modo

1. Prima avvolgere il <input> in un <div class=upload-wrap>
2. Applicare stili a questo nuovo involucro (anche: hover)
3. Utilizzare l'opzione 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    
  });

In questo modo si è in grado di stile il pulsante, un mantenere l'opzione buttonText disponibili. Ho anche avuto a pasticciare un po 'con il file .fla per ottenere il colore e il tipo di carattere per il mio tasto

Answer 6

Un modo molto semplice è quello di aprire il file con Flash

È quindi possibile modificare il colore del simbolo UploadBtn sfondo

salvare e pubblicare il file SWF.

Answer 7

Evan era molto vicino, ma avevo bisogno di fare alcune modifiche per farlo funzionare correttamente. Ecco quello che ho finito per usare:

CSS:

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

#uploadify:hover { 
background: #B33C00; 
}

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

Probabilmente si vuole sintonizzare l'altezza qui perché non importa. Inoltre, ho allineato dalla parte superiore e sinistra piuttosto che a destra ea sinistra dal l'altro esempio. Ho lasciato un po 'di stile in là come un esempio di come è possibile lo stile il pulsante involucro.

HTML:

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

La posizione relativa è importante per il pulsante assoluto posizionato all'interno.

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 larghezza e l'altezza sono molto importanti in quanto determinano la regione reale cliccabile all'interno del pulsante div. Ho scoperto che senza questi è selezionabile solo in una certa area.

Answer 8

Salam. per la versione 3.2.1 Uploadify: È possibile modificare il file di stile uploadify.css in questo classi:

• .uploadify-pulsante
• .uploadify: hover .uploadify-pulsante

nel mio caso, io commento tutti gli stili di loro di rimuovere sfondo e il bordo del Pulsante e di default è stato nascondere completamente.