Changer le " Pas de fichier choisi":

Masquer l'entrée avec css, ajouter une étiquette et l'affecter à la touche input. le label sera cliquable et lorsqu'il sera cliqué, il activera la boîte de dialogue Fichier.

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

alors style l'étiquette comme un bouton si vous voulez.

http://jsfiddle.net/ZDgRG /

voir lien ci-dessus. J'utilise css pour cacher 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];
    }
};

à droite, il n'y a aucun moyen de supprimer ce 'no file choosen', même si vous avez une liste de fichiers pré-upload.

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

1. masquer votre entrée et Ajouter un bouton "fichiers
2. ensuite, appelez le bouton "files" 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, fonctionne parfaitement :)

Fred

mais si vous essayez de supprimer ce tooltip

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

ça ne marchera pas. Voici mon petit truc pour travailler ça, essayer le titre avec un espace. Il va travailler.:)

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

l'Essayer 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 étiquette 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 qu'il est fait, chaque fois que vous cliquez sur l'étiquette, il déclenche automatiquement l'élément du formulaire click event qui est l'élément du fichier click event dans notre cas. Nous faisons alors l'élément de fichier invisible en utilisant display: none et non visibilité: caché pour ne pas créer d'espace vide.

Profiter de codage

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

quelque chose comme ça pourrait marcher

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

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

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

voici le violon de travail:

http://jsfiddle.net/eamrmoc7 /

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

Note: Btn btn-primary est une classe de bouton bootstrap. Cependant, le bouton peut avoir l'air en position. J'espère que vous pouvez le réparer par css inline.

Cela va vous aider à changer le nom pour "pas de fichier choisir pour Sélectionner un profil d'image",

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

il suffit de changer la largeur de l'entrée. Autour de 90px

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

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