web-dev-qa-db-fra.com

Changer le "Aucun fichier choisi":

J'ai un bouton "Choisir un fichier" comme suit (j'utilise Jade mais il devrait être identique à Html5):

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

Dans le navigateur, un bouton avec le texte "Aucun fichier choisi" apparaît. Je souhaite remplacer le texte "Aucun fichier choisi" par un autre élément, tel que "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 «pas de fichier choisi» pour un champ de saisie 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 à comprendre où est le problème?

htmlhtml5buttonfile-uploadpug
57
FranXh

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

10
Jeremy Thille

Cachez l'entrée avec css, ajoutez une étiquette et assignez-la au bouton d'entrée. L'étiquette sera cliquable et lorsque vous cliquerez dessus, la boîte de dialogue de fichier s'ouvrira.

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

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

166
SKManX

http://jsfiddle.net/ZDgRG/

Voir le lien ci-dessus. J'utilise css pour cacher le texte par défaut et utiliser 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];
    }
};
15
Tommy Steimel

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 marche

C'est très simple. L'élément Label utilise la balise "for" pour faire référence à un élément de formulaire par son identifiant. 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 click de l'élément du formulaire, qui est l'événement click de l'élément file dans notre cas. Nous rendons ensuite l'élément de fichier invisible à l'aide de display: none et pas de visibilité: caché afin de ne pas créer d'espace vide. 

Profitez du codage

11
Odin

Mais si vous essayez de supprimer cette info-bulle 

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

Cela ne fonctionnera pas. Voici mon petit truc pour travailler cela, essayez le titre avec un espace. Ça va marcher.:)

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

$(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">

6
Ifeanyi Chukwu
 .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>

3
Raj Chavan

Quelque chose comme ça pourrait marcher

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

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 d'avoir le nom de fichier sélectionné

Voici le violon en marche:

http://jsfiddle.net/eamrmoc7/

1
Satyadev
<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
Ir Calif

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 en position. J'espère que vous pourrez résoudre le problème en css intégré.

1
Naeem Moavia Siddiqui

Cela vous aidera à changer le nom de "pas de fichier, choisissez de sélectionner la photo du profil"

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

utilisation d'une é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>
0
kelvin kantaria

Il suffit de changer la largeur de l'entrée. Environ 90px

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

0
nwillo

Je voudrais utiliser "bouton" au lieu de "label", j'espère que cela aider quelqu'un.

Cela affichera simplement un bouton, l'utilisateur sur lequel l'utilisateur aura cliqué affichera un sélecteur de fichier, une fois le fichier choisi, le télécharger automatiquement.

<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
Amos