Bouton Uploadify: style avec CSS?

Question

Est-il possible de remplacer le bouton de Uploadify (qui est une image contenant jusqu'à / plus bas / états) avec un simple bouton de style CSS?

Answer 1

Je suis en mesure de trouver une solution de travail à ce sujet. Voici les grandes lignes:

• Désactiver la buttonImg: " " image bouton Uploadify
• l'objet flash wmode:"transparent" transparent
• L'utilisation de CSS, placez un button style de faux ou tag a derrière l'objet flash
• Après l'initialisation Uploadify, régler la largeur et la hauteur de l'objet en fonction du bouton derrière

L'objet flash protégera le bouton en dessous des événements mouseover etc.; afin d'obtenir vol stationnaire effets, vous aurez besoin de prendre quelques mesures supplémentaires:

• Enveloppez à la fois sur le bouton et l'objet de téléchargement dans un div
• Après l'initialisation Uploadify, régler la largeur et la hauteur de l'enveloppe div pour correspondre à la touche
• Vous pouvez ensuite utiliser jQuery pour gérer les événements de .hover() sur la div wrapper et appliquer des styles à la touche

Mettre tous ensemble:

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

J'ai pu sortir avec quelque chose de plus simple massivement.

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

Probablement un peu plus facile, maintenant que nous avons hideButton: true, pas sûr si @Herb était au courant.

UPDATE J'ai écrit cette réponse en Juillet 2010. Il est maintenant Mars 2013. HTML5 prend en charge plusieurs fichiers-upload. Ne pas utiliser Uploadify du tout; Je ne sais pas.

Answer 3

Pourquoi ne pas simplement mettre un wrapper autour d'elle comme ceci:

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

Style comme ceci:

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

Et utilisez le script suivant:

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

fonctionne pour moi;) ... et bien sûr, vous pouvez simplement utiliser des images au lieu-arrière-plan des couleurs.

Answer 4

100% exemple de travail. Testé dans Firefox, Chrome, Opera et 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

lire vos réponses m'a aidé à résoudre celui-ci de cette façon

1. Tout d'abord envelopper le <input> dans un <div class=upload-wrap>
2. Appliquer les styles à cette nouvelle enveloppe (même: vol stationnaire)
3. Utilisez l'option 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 cette façon, vous êtes en mesure de style de votre bouton, une garder l'option buttonText disponible. Je devais aussi gâcher un peu avec le fichier fla pour obtenir la couleur et la police pour mon bouton

Answer 6

Une façon très simple est d'ouvrir le fichier avec Flash

Vous pouvez changer la couleur d'arrière-plan du symbole uploadBtn

Enregistrer et publier le swf.

Answer 7

Evan était très proche, mais je devais faire quelques ajustements pour que cela fonctionne correctement. Voici ce que je fini par utiliser:

CSS:

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

#uploadify:hover { 
background: #B33C00; 
}

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

Vous voulez probablement affiner ici la hauteur parce qu'il importe. En outre, j'aligné par le haut et à gauche plutôt que gauche et à droite de l'autre par exemple. J'ai laissé un peu de style là-dedans comme un exemple de la façon dont vous pouvez définir le style de l'emballage bouton.

HTML:

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

La position relative est importante pour le bouton positionné à l'intérieur absolu.

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 largeur et la hauteur sont très importantes car elles déterminent la région cliquable réelle dans le bouton div. J'ai trouvé que, sans eux, il est seulement cliquable dans une certaine zone.

Answer 8

Salam. pour Uploadify Version 3.2.1: Vous pouvez modifier le fichier de feuille de style uploadify.css dans cette classe:

• .uploadify bouton
• .uploadify: hover .uploadify bouton

dans mon cas, je commente tous les styles d'entre eux pour enlever fond et la bordure du bouton bouton et par défaut a été cacher complètement.