Comment styliser l'entrée type="file" bouton.
Je viens de trouver une solution jquery basée sur ce script ici : blog.vworld.at/2008/08/21/…
Réponses
Trop de publicités?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.
@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 !
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.
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,
@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.
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 ?
@kevin -> Veuillez essayer event.preventDefault() après document.myForm.submit() , j'ai fait le changement au code ci-dessus.
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 :
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 :
Il n'y a pas de possibilité de style spécial pour les programmes basés sur Gecko comme Firefox.
Dans votre réponse, à l'aide de css, comment cacher le mot "No file chosen" dans la balise <input type=file>.Veuillez me commenter.
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;
});
});
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é.
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.
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 ?
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 jQueryViolon : 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
Par simple curiosité, fonctionne-t-il dans tous les navigateurs de nouvelle génération tels que Firefox, IE, Opera, Safari, Chrome, etc ?
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.
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
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.jpg0 votes
Ce qui a fonctionné pour moi, c'est de placer un div au-dessus de l'élément Input et de donner à ce div le style que vous souhaitez. Ensuite, mettez l'opacité de l'élément Input à 0 et donnez-lui la même taille que le div.