web-dev-qa-db-fra.com

Fichier de type d'entrée de style?

Est-il possible de styler un élément d'entrée de type fichier sans se soucier de la compatibilité du navigateur? Dans mon cas, j'ai besoin d'implémenter une image d'arrière-plan et une bordure ronde (1px), le bouton doit également être personnalisé si possible.

htmlcssfileinputcross-browser
34
Banshee

Suivez ces étapes pour créer des styles personnalisés pour votre formulaire de téléchargement de fichier:

1.) Ceci est 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.) Utilisez ensuite ce simple script pour transmettre l’événement click à la balise d’entrée.

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

Maintenant, vous pouvez utiliser n'importe quel type de style sans vous soucier de la façon de changer les styles par défaut ... Je le sais très bien, car j'essaie de changer les styles par défaut depuis un mois et demi. croyez-moi, c'est très difficile, car différents navigateurs ont des balises d'entrée différentes Utilisez donc celui-ci pour créer votre formulaire de téléchargement de fichier personnalisé. Voici le code de TÉLÉCHARGEMENT AUTOMATISÉ complet.

<html>
<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>
<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>
29
teshguru

Même solution via Jquery. Fonctionne si vous avez plusieurs entrées de fichier dans la page.

$j(".filebutton").click(function() {
    var input = $j(this).next().find('input');
    input.click();
});

$j(".fileinput").change(function(){

    var file = $j(this).val();
    var fileName = file.split("\\");
    var pai =$j(this).parent().parent().prev();
    pai.html(fileName[fileName.length-1]);
    event.preventDefault();
});
8
Iris

Voici une solution simple en CSS, qui crée une zone cible cohérente et vous permet de styler vos faux éléments comme vous le souhaitez. 

L'idée de base est la suivante:

  1. Avoir deux "faux" éléments (une entrée de texte/un lien) comme frères et soeurs dans votre entrée de fichier réel. Absolument les positionner afin qu'ils soient exactement au-dessus de votre zone cible.
  2. Enveloppez votre entrée de fichier avec un div. Définissez overflow sur hidden (pour que le fichier ne déborde pas) et définissez-le exactement à la taille souhaitée.
  3. Définissez l'opacité sur 0 sur l'entrée de fichier afin qu'il soit masqué mais toujours cliquable. Donnez-lui une taille de police importante pour pouvoir cliquer sur toutes les parties de la zone cible.

Voici le jsfiddle: http://jsfiddle.net/gwwar/nFLKU/

<form>
    <input id="faux" type="text" placeholder="Upload a file from your computer" />
    <a href="#" id="browse">Browse </a>
    <div id="wrapper">
        <input id="input" size="100" type="file" />
    </div>
</form>
3
Kerry Liu

Après avoir longtemps cherché sur Google, après avoir essayé plusieurs solutions, CSS, JavaScript et JQuery, j'ai constaté que la plupart d'entre elles utilisaient une image comme bouton. Certains d’entre eux étaient difficiles à utiliser, mais j’ai réussi à rassembler quelque chose qui a finalement fonctionné pour moi.

Les parties importantes pour moi étaient:

  • Le bouton Parcourir devait être un bouton (pas une image).
  • Le bouton devait avoir un effet de survol (pour lui donner une apparence agréable).
  • La largeur du texte et du bouton devait être facile à régler.
  • La solution devait fonctionner sous IE8, FF, Chrome et Safari.

C’est la solution que j’ai trouvée. Et j'espère que cela pourra être utile à d'autres aussi.

Modifiez la largeur de .file_input_textbox pour modifier la largeur de la zone de texte.

Modifiez la largeur des fichiers .file_input_div, .file_input_button et .file_input_button_hover pour modifier la largeur du bouton. Vous devrez peut-être modifier un peu les positions également. Je n'ai jamais compris pourquoi ...

Pour tester cette solution, créez un nouveau fichier html et collez-y le contenu.

<html>
<head>

<style type="text/css">

.file_input_textbox {height:25px;width:200px;float:left; }
.file_input_div     {position: relative;width:80px;height:26px;overflow: hidden; }
.file_input_button  {width: 80px;position:absolute;top:0px;
                     border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px;
                     border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden  {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer;
                     opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0; }
</style>
</head>
<body>
    <input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
 <div class="file_input_div">
  <input id="fileInputButton" type="button" value="Browse" class="file_input_button" />
  <input type="file" class="file_input_hidden" 
      onchange="javascript: document.getElementById('fileName').value = this.value" 
      onmouseover="document.getElementById('fileInputButton').className='file_input_button_hover';"
      onmouseout="document.getElementById('fileInputButton').className='file_input_button';" />
</div>
</body>
</html>
3
Jonas Mølgaard

Utilisez la propriété de clip avec l'opacité, l'indice z, le positionnement absolu et certains filtres de navigateur pour placer l'entrée de fichier sur le bouton souhaité:

http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping

1
Paul Sweatte

utilisez uniform js plugin pour styler une entrée de tout type, sélectionnez, textarea.

L'URL est http://uniformjs.com/

0
Hassaan