Modifiez le "Aucun fichier choisi":


90

J'ai un bouton "Choisir un fichier" comme suit (j'utilise Jade mais cela devrait être le même que Html5):

 input(type='file', name='videoFile')

Dans le navigateur, cela montre un bouton avec un texte à côté "Aucun fichier choisi". Je voudrais remplacer le texte "Aucun fichier choisi" par autre chose, comme "Aucune vidéo choisie" ou "Choisissez une vidéo s'il vous plaît". J'ai suivi les premières suggestions ici:

Je ne veux pas voir "aucun fichier choisi" pour un champ d'entrée de fichier

Mais cela n'a pas changé le texte:

 input(type='file', name='videoFile', title = "Choose a video please")

Quelqu'un peut-il m'aider à déterminer où est le problème?



1
@MahmoudFarahat je ne veux pas le supprimer, je veux changer le texte
FranXh

Ne pouvez-vous pas supprimer le texte et mettre une étiquette d'espace réservé à côté?
Roger Lipscombe

Il y a une réponse très précise à cela dans un autre article. stackoverflow.com/a/21842275/3653494
P-Bagels

c'est très possible: consultez cette solution rapide - comprend d'autres choses, faites
darga33

Réponses:


17

Je suis presque sûr que vous ne pouvez pas changer les étiquettes par défaut sur les boutons, elles sont codées en dur dans les navigateurs (chaque navigateur rendant les légendes des boutons à sa manière). Consultez cet article sur le style des boutons


6
Ce n'est pas l'étiquette sur le bouton, est le "Aucun fichier choisi" à côté. Lorsque je choisis un fichier, il passe de Aucun fichier choisi à NomFichier.quelque chose. Je pense donc que cela devrait être modifiable.
FranXh

@JeremyThille parce que les gens sont des gens.
amn

216

Cachez l'entrée avec css, ajoutez une étiquette et affectez-la au bouton d'entrée. l'étiquette sera cliquable et lorsque vous cliquez dessus, la boîte de dialogue de fichier sera ouverte.

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

Puis stylisez l'étiquette comme un bouton si vous le souhaitez.


1
Cela fonctionne même dans IE9, où vous ne pouvez pas masquer file inputet cliquer dessus à partir de JavaScript. Merci!
huysentruitw

1
C'est bien. Élégance Hackity. Aimer.
Ben

3
Excellente solution, cela devrait être la réponse acceptée.
Multitut

1
Excellente solution, elle permet même de personnaliser facilement le champ
SAFAD

8
Solution html intéressante, mais mauvaise pour la convivialité. L'utilisateur verra toujours "Sélectionner un fichier" ou équivalent, même après avoir sélectionné un fichier.
Cthulhu

26

Essayez ceci, c'est juste un truc

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

Comment ça fonctionne

C'est très simple. l'élément Label utilise la balise "for" pour faire référence à l'élément d'un formulaire par id. Dans ce cas, nous avons utilisé "img" comme clé de référence entre eux. Une fois que c'est fait, chaque fois que vous cliquez sur l'étiquette, cela déclenche automatiquement l'événement de clic d'élément du formulaire qui est l'événement de clic d'élément de fichier dans notre cas. Nous rendons ensuite l'élément file invisible en utilisant display: none et non visible: hidden afin qu'il ne crée pas d'espace vide.

Profitez du codage


2
Vous pouvez améliorer cette réponse en expliquant comment cela fonctionne.
user8397947

Il semble que faire glisser des fichiers ne fonctionne pas lorsque vous faites cela.
fonZ

16

http://jsfiddle.net/ZDgRG/

Voir le lien ci-dessus. J'utilise css pour masquer le texte par défaut et j'utilise une étiquette pour montrer ce que je veux:

<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>

input[type=file]{
    width:90px;
    color:transparent;
}

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};

13

Bon, il n'y a aucun moyen de supprimer ce «aucun fichier choisi», même si vous avez une liste de fichiers pré-téléversés.

La solution la plus simple que j'ai trouvée (et fonctionne sur IE, FF, CR) est la suivante

  1. Cachez votre saisie et ajoutez un bouton `` fichiers ''
  2. puis appelez le bouton 'fichiers' et demandez-lui de lier fileupload (j'utilise JQuery dans cet exemple)

$('.addfiles').on('click', function() { $('#fileupload').click();return false;});
<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>

C'est fait, ça marche parfaitement :)

Fred


7

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})
input[type="file"]{
    color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">


Cela fonctionne très efficacement, il masquera le texte près de l'entrée du fichier.
toujours un apprenant

6

Mais si vous essayez de supprimer cette info-bulle

<input type='file' title=""/>

Cela ne fonctionnera pas. Voici ma petite astuce pour travailler ceci, essayez le titre avec un espace. Ça va marcher.:)

<input type='file' title=" "/>

J'ai testé dans chrome et tous les navigateurs. Cela fonctionne bien. Pouvez-vous s'il vous plaît le tester et le vérifier.
simon

4
Testé à nouveau dans Chrome, Safari, Firefox. Ça ne marche pas.
AdamInTheOculus

Je vérifie dans Chrome Version 56.0.2924.87 cela fonctionne parfaitement bien. Quelle version utilisez-vous? @PantsMagee
simon

Il ajoute simplement une info-bulle avec le texte que vous avez défini à l' titleattribut, comme je le vois
Fyodor

3

Quelque chose comme ça pourrait fonctionner

input(type='file', name='videoFile', value = "Choose a video please")

3

HTML

  <div class="fileUpload btn btn-primary">
    <label class="upload">
      <input name='Image' type="file"/>
    Upload Image
    </label>
  </div>

CSS

input[type="file"]
{
  display: none;
}
.fileUpload input.upload 
{
    display: inline-block;
}

Remarque: Btn btn-primary est une classe de bouton d'amorçage. Cependant, le bouton peut sembler bizarre en position. J'espère que vous pourrez le réparer par css en ligne.


3
 .vendor_logo_hide{
      display: inline !important;;
      color: transparent;
      width: 99px;
    }
    .vendor_logo{
      display: block !important;
      color: black;
      width: 100%; 
    }

$(document).ready(function() {
  // set text to select company logo 
  $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
  // on change
  $('#Uploadfile').change(function() {
    //  show file name 
    if ($("#Uploadfile").val().length > 0) {
      $(".file_placeholder").empty();
      $('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo');
      console.log($("#Uploadfile").val());
    } else {
      // show select company logo
      $('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide');
      $("#Uploadfile").after("<span class='file_placeholder'>Select  Company Logo</span>");
    }

  });

});
.vendor_logo_hide {
  display: inline !important;
  ;
  color: transparent;
  width: 99px;
}

.vendor_logo {
  display: block !important;
  color: black;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>
<span class="fa fa-picture-o form-control-feedback"></span>

<div>
  <p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>
</div>


Comment puis-je afficher le texte "Sélectionner le logo de l'entreprise" sous le bouton et non sur le côté droit ??
alex

3

utilisation de l'étiquette avec le texte de l'étiquette modifié

<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>

ajouter jquery

<script>
     $("#files").change(function(){
        $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");     
     });
</script>

2

Changez simplement la largeur de l'entrée. Environ 90px

<input type="file" style="width: 90px" />


1
C'est simple et fonctionne bien. Seule la largeur est de 100 pixels; :)
Sachin Shah le

1
<div class="field">
    <label class="field-label" for="photo">Your photo</label>
    <input class="field-input" type="file" name="photo"  id="photo" value="photo" />
</div>

et le css

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}

1
input [type = "file"] {couleur: transparent; couleur d'arrière-plan: # F89406; bordure: solide 2px # 34495e; largeur: 100%; hauteur: 36px; rayon de la bordure: 3px; }
Ir Calif

1

Vous pouvez l'essayer de cette façon:

<div>
    <label for="user_audio" class="customform-control">Browse Computer</label>
    <input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
 <span id='button'>Select File</span>
</div>

Pour afficher le fichier sélectionné:

$('#button').click(function () {
    $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function () {
    $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
    $('.customform-control').hide();
})

Merci à @ unlucky13 pour avoir obtenu le nom de fichier sélectionné

Voici le violon de travail:

http://jsfiddle.net/eamrmoc7/


0

Cela vous aidera à changer le nom de "aucun fichier choisir de sélectionner une photo de profil"

<input type='file'id="files" class="hidden"/>  
<label for="files">Select profile picture</label>

le bouton est parti.
Diansheng

cela a très bien fonctionné pour moi. Le bouton a disparu, mais en cliquant sur l'étiquette, ouvrez la boîte de dialogue pour ouvrir les fichiers et vous pouvez appliquer un style à l'étiquette pour qu'elle ressemble à un bouton. Il s'est débarrassé du texte ennuyeux "No File Chosen".
NoBullMan

0

J'utiliserais "bouton" au lieu de "étiquette", j'espère que cela aidera quelqu'un.

Cela affichera simplement un bouton, l'utilisateur cliqué fera apparaître le sélecteur de fichier, une fois le fichier choisi, le téléchargement automatique.

<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>

<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />

<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />

0

vous pouvez utiliser le code css suivant pour masquer (aucun fichier choisi)

HTML

<input type="file" name="page_logo" id="page_logo">

CSS

input[type="file"]:after {color: #fff}

ASSUREZ-VOUS QUE LA COULEUR CORRESPOND À LA COULEUR DU FOND


-1

Il y a un bon exemple (qui inclut la validation du type de fichier) à:

https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html

C'est essentiellement une version étoffée de l'idée d'Amos d'utiliser un bouton.

J'ai essayé plusieurs des suggestions ci-dessus sans succès (mais c'est peut-être moi).

Je le réutilise pour effectuer une conversion de fichier Excel en utilisant

  <form>
    <div>
      <label for="excel_converts">Choose a spreadsheet to convert.</label>
      <input type="file" id="excel_converts" name="excel_converts" accept=".xlsx, .xls, .csv" >
    </div>
    <div class="preview">
      <p>No spreadsheet currently selected for conversion</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>

Donc, cela a été déclassé pourquoi? Peut-être parce que dans un article totalement indépendant, j'ai suggéré qu'il était facile de faire des votes négatifs par réflexe mais beaucoup moins facile d'être convaincant?
DLyons
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.