web-dev-qa-db-fra.com

bouton de téléchargement de fichier sans champ de saisie?

Duplicata possible:
jQuery: la simulation d'un clic sur un <type d'entrée = "fichier" /> ne fonctionne pas dans Firefox?

Est-il possible d'avoir un bouton de fichier sans entrée à côté par défaut? Idéalement, tout ce que je veux, c'est un bouton qui permet à l'utilisateur d'accéder à un fichier sans afficher ce qu'il a sélectionné avant le téléchargement. Je soumettrai le formulaire comme suit après qu'un utilisateur aura choisi un fichier:

$("#file").change(function() {
    $("#update_button").trigger('click');
});

Je suis sûr que cela doit être possible avec de la magie css ou jquery ...

jqueryhtmlcssfile-upload
23
Paul

Si je me souviens bien, HTML5 vous permet d'appeler la méthode click sur un élément d'entrée caché pour afficher la boîte de dialogue du fichier via un bouton personnalisé (pourquoi ne pas simplement le faire fonctionner sans élément, je ne sais pas). Malheureusement, tous les navigateurs actuellement utilisés ne le prennent pas encore en charge, vous êtes donc coincé avec le style d'une entrée de fichier pour ressembler à un bouton.

Ceci est un hack CSS hilarant et laid mais ingénieux que j'ai rencontré sur un site une fois (probablement imgur):

.fileupload {
    width: 100px;
    height: 50px;
    position: relative;
    overflow: hidden;
    background: ...; /* and other things to make it pretty */
}

.fileupload input {
    position: absolute;
    top: 0;
    right: 0; /* not left, because only the right part of the input seems to
                 be clickable in some browser I can't remember */
    cursor: pointer;
    opacity: 0.0;
    filter: alpha(opacity=0); /* and all the other old opacity stuff you
                                 want to support */
    font-size: 300px; /* wtf, but apparently the most reliable way to make
                         a large part of the input clickable in most browsers */
    height: 200px;
}

Et le HTML pour l'accompagner:

<div class="fileupload">
  <input type="file" />
  Any content here, perhaps button text
</div>

Ce qu'il fait, c'est qu'il rend le fichier lui-même énorme (en changeant la taille de la police (!?)) Pour s'assurer qu'il couvre le bouton, puis coupe l'excédent avec overflow: hidden;. Cela peut ne pas fonctionner pour des boutons absolument énormes.

22
Matti Virkkunen

Vous pouvez simplement masquer le bouton input avec visibility: hidden;, et attachez un gestionnaire d'événements Click à l'autre bouton:

HTML: 

<input type="file" name="somename" size="chars">
<button>Choose File</button>

CSS: 

input {
    display: block;
    visibility: hidden;
    width: 0;
    height: 0;
}

JavaScript: 

$('button').click(function(){
    $('input').click();
});

Voici le violon: http://jsfiddle.net/tCzuh/

52
Joseph Silber

Si vous définissez l'opacité sur 0, vous pouvez ajouter un autre div en dessous qui ressemble à un bouton. Vous pouvez alors le coiffer comme bon vous semble.

Exemple de code de travail ci-dessous:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div class="wrapper">
    <div class="fakeuploadbutton">upload</div>
    <input id="file" type="file" name="file" />
</div>
<script type="text/javascript" charset="utf-8">
    jQuery('#file').css('opacity',0);    
</script>
<style type="text/css" media="screen">
    .wrapper { position: relative; }
    .fakeuploadbutton { 
        background: red url('myuploadbutton.png') no-repeat top left;
        width: 100px; height: 30px;
    }
    #file { 
        position: absolute;
        top: 0px; left: 0px; 
        width: 100px; height: 30px;
    }
</style>
7
mattlangtree

Une option à regarder est ici:

http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Cela permet une plus grande personnalisation d'un <input> champ

0
Jason