924 votes

Stylisation d'un bouton input type="file" (entrée)

Comment styliser l'entrée type="file" bouton.

0 votes

Je vais ajouter ma propre réponse pour le faire de la manière dont je l'ai fait...mais voici un exemple basé sur bootstrap qui pourrait vous aider.... geniuscarrier.com/

0 votes

Le problème avec cet élément, semble être qu'il ne prend pas le style comme d'autres éléments similaires à eux. Comme input type="submit"> . J'ai appliqué le même style aux deux types d'entrée, et voici ce que j'ai obtenu : i.imgur.com/7MI1Poh.jpg

295voto

Jonathan Moffatt Points 4322

Il est notoirement difficile de styliser les entrées de fichiers, car la plupart des navigateurs ne modifient pas l'apparence à partir de css ou de javascript.

Même la taille de l'entrée ne répondra pas à ce genre de choses :

<input type="file" style="width:200px">

Vous devrez plutôt utiliser l'attribut size :

<input type="file" size="60" />

Pour tout style plus sophistiqué que cela (par exemple, changer l'apparence du bouton de navigation), vous devrez envisager une approche astucieuse consistant à superposer un bouton et un champ de saisie stylisés à la saisie du fichier natif. L'article déjà mentionné par rm à www.quirksmode.org/dom/inputfile.html est le meilleur que j'ai vu.

7 votes

Je viens de trouver une solution jquery basée sur ce script ici : blog.vworld.at/2008/08/21/…

1 votes

@TLK La réponse de Ryan ne fonctionne pas dans IE lorsque vous essayez de faire des téléchargements iframe. Elle vous donne une erreur d'accès refusé. Pour les téléchargements normaux, je suis d'accord pour dire que c'est le plus simple !

3 votes

Une solution beaucoup plus simple que celle de quirksmode est expliquée aquí . Je mets juste ce lien ici, puisque cette réponse est essentiellement une réponse de lien seulement de toute façon.

211voto

teshguru Points 1907

Si vous suivez ces étapes, vous pouvez créer des styles personnalisés pour votre formulaire de téléchargement de fichiers :

1.) Voici le formulaire html simple (veuillez lire les commentaires html que j'ai écrits ci-dessous).

    <form action="#type your action here" method="POST" enctype="multipart/form-data">
    <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
    <!-- this is your file input tag, so i hide it!-->
    <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
    <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
    <input type="submit" value='submit' >
    </form>

2.) puis utiliser ce simple script pour passer l'événement de clic à la balise de saisie de fichier.

    function getFile(){
        document.getElementById("upfile").click();
    }

maintenant vous pouvez utiliser n'importe quel type de style sans vous soucier de changer les styles par défaut. Je sais cela très bien, parce que j'ai essayé de changer les styles par défaut pour un mois et demi. croyez-moi, il est très difficile parce que les différents navigateurs ont différents upload input tag. Donc, utilisez celui-ci pour construire votre fichier personnalisé upload forms.Here est le code complet AUTOMATED UPLOAD.

<html>
<head>
<style>
#yourBtn{
   position: relative;
       top: 150px;
   font-family: calibri;
   width: 150px;
   padding: 10px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border: 1px dashed #BBB; 
   text-align: center;
   background-color: #DDD;
   cursor:pointer;
  }
</style>
<script type="text/javascript">
 function getFile(){
   document.getElementById("upfile").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
  }
</script>
</head>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
</center>
</body>
</html>

Profitez-en !

Passez une bonne journée,

6 votes

@user1053263 -> Merci pour la recommandation ici j'ai utilisé un script java très simple, pas besoin d'utiliser des frameworks comme Jquery ou PrototypeJS.

7 votes

J'ai des difficultés à soumettre le formulaire dans IE9. J'obtiens une erreur "Access is Denied" lorsque j'essaie de soumettre le formulaire via javascript. Si je clique sur le bouton d'envoi via l'interface utilisateur, cela fonctionne. Existe-t-il une solution pour résoudre ce problème ?

1 votes

@kevin -> Veuillez essayer event.preventDefault() après document.myForm.submit() , j'ai fait le changement au code ci-dessus.

77voto

Ryan Points 783

Cachez-le avec css et utilisez un bouton personnalisé avec $(selector).click() pour activer le bouton de navigation. puis définissez un intervalle pour vérifier la valeur du type d'entrée de fichier. l'intervalle peut afficher la valeur pour l'utilisateur afin que l'utilisateur puisse voir ce qui est téléchargé. l'intervalle sera effacé lorsque le formulaire est soumis [EDIT] Désolé, j'ai été très occupé et je voulais mettre à jour ce post, voici un exemple.

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

8 votes

Notez que si vous utilisez cette méthode, elle ne fonctionnera pas dans Internet Explorer, car il s'agit d'une exception de sécurité.

1 votes

Merci pour le conseil. Quand j'utilise IE, il a généralement une mise en page séparée de tout le reste. Je déteste IE. Mais je simplifie tout dans IE.

1 votes

Avec FF20, $('#file-type').click() ne semble pas faire apparaître l'écran "Choose file" - en fait, rien ne se passe. Avez-vous une idée ?

76voto

Anselm Urban Points 767

Tous les moteurs de rendu génèrent automatiquement un bouton lors de la création d'une page. Historiquement, ce bouton n'est absolument pas stylisable. Cependant, Trident et WebKit ont récemment ajouté des crochets à travers des pseudo-éléments.

Trident

À partir d'IE10, le bouton de saisie du fichier peut être stylisé à l'aide de la fonction ::-ms-browse pseudo-élément. En fait, toutes les règles CSS que vous appliquez à un bouton ordinaire peuvent être appliquées au pseudo-élément. Par exemple :

<input type="file">

::-ms-browse {
    background: black;
    color: red;
    padding: 1em;
}

Cela s'affiche comme suit dans IE10 sous Windows 8 :

This displays as follows in IE10 on Windows 8:

WebKit

WebKit fournit un crochet pour son bouton d'entrée de fichier avec la fonction ::-webkit-file-upload-button pseudo-élément. Là encore, pratiquement toutes les règles CSS peuvent être appliquées, et l'exemple du Trident fonctionnera donc également ici :

<input type="file">
::-webkit-file-upload-button {
    background: black;
    color: red;
    padding: 1em;
}

Cela s'affiche comme suit dans Chrome 26 sous OS X :

This displays as follows in Chrome 26 on OS X:

0 votes

Il n'y a pas de possibilité de style spécial pour les programmes basés sur Gecko comme Firefox.

2 votes

Dans votre réponse, à l'aide de css, comment cacher le mot "No file chosen" dans la balise <input type=file>.Veuillez me commenter.

0 votes

Je n'en ai aucune idée, désolé.

69voto

Wykk Points 371

HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

Violon : http://jsfiddle.net/M7BXC/

Vous pouvez aussi atteindre vos objectifs sans jQuery avec du JavaScript normal.

Maintenant le newBtn est lié au html_btn et vous pouvez styliser votre nouveau btn comme vous le souhaitez :D

1 votes

Par simple curiosité, fonctionne-t-il dans tous les navigateurs de nouvelle génération tels que Firefox, IE, Opera, Safari, Chrome, etc ?

0 votes

C'est la solution la plus simple pour moi ! Au moins dans IE 9, Chrome 23 et FF 16 avec jQuery 1.7.2, donc avec les versions mises à jour ça devrait fonctionner.

0 votes

Est-ce que quelqu'un sait comment changer le .new_Btn dans le cas où l'utilisateur a choisi une image. Actuellement, il affiche la même classe. Quelqu'un sait-il comment suivre cela ? Merci

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X