Comment personnaliser l'entrée de fichier de type bouton et la zone de texte

J'ai besoin de personnaliser le bouton de téléchargement de fichiers à partir du formulaire ci-dessous.

Comment personnaliser l'entrée de fichier de type bouton et la zone de texte

Maintenant mon fileupload bouton ressemble à fileupload image.J'ai besoin de le personnaliser comme personnaliser-upload de fichier image

<form id="myform" action="" enctype="multipart/form-data">

    <input id="tele" type="file" name="filename" />
    <br/>
    <input class="btn" type="submit" value="Upload" />
</form>
InformationsquelleAutor Rama Priya | 2013-12-21
  1. 6

    Après avoir vu votre image, je pense que u veux input type comme une zone de texte et pas le bouton.U peut essayer avec le maintien d'entrée type de fichier caché et avoir de zone de texte comme ceci

     <input id="txt" type = "text" value = "Choose File" 
       onclick ="javascript:document.getElementById('file').click();">
      <input id = "file" type="file" style='visibility: hidden;' name="img" onchange="ChangeText(this, 'txt');"/>



function ChangeText(oFileInput, sTargetID) {

    document.getElementById(sTargetID).value = oFileInput.value;
}

    Vous pouvez facilement appliquer le style css à cette zone de texte

    DÉMO

    • Oui, partiellement travail.Ce que j'ai à faire pour afficher le fichier téléchargé nom dans la zone de texte @ Nitin varpe
    • Voir le jour s'il vous plaît
    • Il n'est pas de travail.pouvez vous s'il vous plaît mettre à jour le violon avec ce code@Nitin varpe
    • mais le lien donné est à jour et fonctionne
    • Son travail mais je suis arriver le nom du fichier avec le chemin d'accès(C:\fakepath\sample.docx) je veux juste montrer le nom du fichier@Nitin varpe
    • mais sur ma machine seulement de donner son nom de fichier. ok u peut utiliser des sous-chaîne pour obtenir la dernière chaîne après \, ne devrais pas avoir de problème
    • laissez-nous continuer cette discussion dans le chat

    InformationsquelleAutor Nitin Varpe
  2. 1

    Donner les styles que vous voulez, bien sûr, mais quelques exemples de la façon de le faire sont fournis ci-dessous.

    input[type="file"] {
       border: 4px solid red;
       border-radius: 40px;
}

    ou essayer

    #tele {
     border: 4px solid red;
     border-radius: 50px;
 }

    si pour une raison quelconque, aucune de ces œuvres, vous pourriez avoir besoin pour être plus précis, comme si

    #myform #tele {
     border: 3px solid blue;
 }
    • ou .btn { aussi..
    • J'ai besoin de personnaliser type="file" pas le bouton "submit". @codehorse
    • <input type="file" n'est pas le "bouton",.. C'est la zone de texte d'entrée.
    • Votre code n'est pas de soutenir à mon exigence.J'ai besoin de personnaliser le choisir le fichier ou le bouton parcourir.u peut mettre à jour en violon
    • J'ai mis à jour mon post avec l'image en fonction de mes besoins.j'espère que maintenant vous pouvez en mesure de comprendre mon question.@codehorse
    InformationsquelleAutor CRABOLO
  3. 0

    Vous pouvez utiliser background: url('image_url'); pour ajouter une image de bouton

    InformationsquelleAutor Manolo
  4. 0

    Pour résoudre ce problème, vous pouvez mettre la input balise à l'intérieur d'un label et le style de l'étiquette, qui serait donc la superposition de bouton.

    InformationsquelleAutor mumush