Un bouton d'entrée de fichier pour tous les navigateurs, est-ce possible?

Est-il possible d'utiliser uploadify de permettre à tout utilisateur de sélectionner un fichier dans le dialogue et l'insérer dans le fichier de l'élément d'entrée d'un formulaire? J'ai seulement besoin d'utiliser uploadify comme un moyen de style le bouton "upload" comme une image.

J'ai essayé d'autres approches iciici et ici. Tous ne sont pas compatibles avec tous les navigateurs.

Quoi d'autre puis-je utiliser /faire pour avoir mon fichier de l'élément d'entrée comme une image?

Je voudrais avoir mon fichier bouton input pour une apparence cohérente dans tous les navigateurs.

source d'informationauteur Christian Fazzini

  1. 40

    Je ne me souviens pas de la source de la technique, mais cette semble être cross-browser. Testé dans:

    • Google Chrome 9
    • FireFox 3.6
    • Internet Explorer 6 À 9
    • Opera 10
    • Safari pour Windows

    Voici le code complet:

    HTML:

    <div>
    <button><!-- this is skinnable -->Pick a file ...</button>
    <input type="file" />
</div>

    CSS:

    div
{
    position:relative;
    width: 100px;
    height: 30px;
    overflow:hidden;
}

div button
{
    position: absolute;
    width: 100%;
    height: 100%;
}

div input
{
    font: 500px monospace; /* make the input's button HUGE */
    opacity:0; /* this will make it transparent */
    filter: alpha(opacity=0); /* transparency for Internet Explorer */
    position: absolute;  /* making it absolute with z-index:1 will place it on top of the button */
    z-index: 1;
    top:0;
    right:0;
    padding:0;
    margin: 0;
}

    L'idée est de faire de la <input type="file" /> transparent et placer sur le dessus de certains style de contenu (un <button> dans ce cas). Lorsque l'utilisateur clique sur le bouton, elle sera de cliquer sur le <input type="file" />.

  2. 2

    La manière la plus simple d'utiliser un "label" de la balise et le "pour" de la propriété. Comme ce http://jsfiddle.net/Txrs6/ mais dans ce cas, nous ne voyons pas de fichier choisi.
    CODE

    <label for="inputFile" class="col-sm-3" style="padding-left: 0px;"><a class="btn btn-info">Выбрать...</a></label>`

<input style="display: none;" type="file" id="inputFile">

    D'une autre façon avec js http://jsfiddle.net/PZ5Ep/

  3. 0

    Votre meilleur pari dans ce cas serait d'utiliser un flash uploader. Ce serait introduire un complet contrôle séparé et aurait aucune dépendance sur le navigateur. Il y en a beaucoup sur le net. En voici un : http://swfupload.org/

  4. 0

    Si c'est seulement le bouton de téléchargement que vous voulez de style, pourquoi ne pouvez-vous pas utiliser les CSS? Qui devrait fonctionner sur tous les navigateurs.

    Si vous mettez votre code sur jsFiddle, je peux vous en dire plus sur ce que vous pouvez faire.