Bouton Uploadify: Style avec CSS?

Question

Est-il possible de remplacer le bouton Uploadify (qui est un graphique contenant des états haut / bas / haut) par un simple bouton de style CSS?

Answer 1

J'ai pu m'en tirer avec quelque chose de beaucoup plus 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(); 
 

Probablement un peu plus facile, maintenant que nous avons hideButton: true , je ne sais pas si @Herb le savait.

MISE À JOUR J'ai écrit cette réponse en juillet 2010. Nous sommes maintenant en mars 2013. HTML5 prend en charge plusieurs téléchargements de fichiers. N'utilisez pas du tout uploadify; Je ne.

Answer 2

J'ai été en mesure de venir avec une solution qui fonctionne à présent. Voici le schéma de base:

• Désactiver le Uploadify de l'image du bouton buttonImg: " "
• Faire l'objet flash transparent wmode:"transparent"
• À l'aide de CSS, la position d'un faux style button ou a balise derrière l'objet flash
• Après l'initialisation des Uploadify, définissez la largeur et la hauteur de l'objet pour faire correspondre le bouton derrière elle

Le flash de l'objet de bouclier sur le bouton en dessous de la souris etc. les événements; donc, pour obtenir effets de survol, vous aurez besoin de prendre quelques mesures supplémentaires suivantes:

• Wrap à la fois le bouton et l'objet de téléchargement dans un div
• Après l'initialisation des Uploadify, définissez la largeur et la hauteur de la div wrapper pour correspondre le bouton
• Vous pouvez ensuite utiliser jQuery pour gérer l' .hover() événements sur l'emballage div 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 3

Pourquoi ne pas simplement mettre un Wrapper autour de lui comme ceci:

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

Style comme ça:

 .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 de fond au lieu des couleurs.

Answer 4

Exemple 100% fonctionnel. 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

la lecture de vos réponses m'ont aidé à résoudre ce un de cette façon

1. Première envelopper l' <input> en <div class=upload-wrap>
2. Appliquer des styles pour cette nouvelle wrapper (même :hover)
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, garder le buttonText disponible en option. J'ai également eu à déconner un peu avec la .fichier fla pour obtenir la couleur et la police de mon bouton