Modifiez le "Aucun fichier choisi":

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?

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

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.

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

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];
    }
};

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

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=" "/>

Quelque chose comme ça pourrait fonctionner

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

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.

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

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>

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

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

<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; 
}

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/

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>

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;" />

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

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>