web-dev-qa-db-fra.com

Comment puis-je supprimer l'info-bulle "Aucun fichier choisi" d'une entrée de fichier dans Chrome?

Je souhaite supprimer l'info-bulle "Aucun fichier choisi" de l'entrée d'un fichier dans Google Chrome (je vois qu'aucune info-bulle n'est affichée dans Firefox).

Veuillez noter que je ne parle pas du texte à l'intérieur du champ de saisie, mais de l'info-bulle qui apparaît lorsque vous déplacez la souris sur l'entrée.

J'ai essayé sans succès:

$('#myFileInput').attr('title', '');
javascriptjqueryhtmlcssgoogle-chrome
66
German Latorre

Ceci est une partie native des navigateurs webkit et vous ne pouvez pas le supprimer. Vous devriez penser à une solution simple comme couvrant ou masquant les entrées de fichier. 

Une solution hacky:

input[type='file'] {
  opacity:0    
}


<div>
    <input type='file'/>
    <span id='val'></span>
    <span id='button'>Select File</span>
</div>   


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

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

Fiddle

54
undefined

Pour moi, je voulais juste que le texte soit invisible et que j'utilise toujours le bouton du navigateur natif.

input[type='file'] {
  color: transparent;
}

J'aime toutes les suggestions de undefined, mais j'avais un cas d'utilisation différent. J'espère que cela aidera quelqu'un dans la même situation.

48
Dwayne Forde

l'info-bulle par défaut peut être modifiée à l'aide de l'attribut title

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

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

Vous pouvez désactiver l'info-bulle en définissant un titre avec un espace sur les navigateurs Web tels que Chrome et une chaîne vide sur Firefox ou IE (testé sur Chrome 35, FF 29, IE 11, Safari Mobile).

$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');
8
jbier

Très facile, oubliez CSS en ciblant la chose input ["type"], cela ne fonctionne pas pour moi. Je ne sais pas pourquoi. J'ai ma solution dans ma balise HTML

<input type="file" style="color:transparent; width:70px;"/>

Fin du problème

5
Lawel

Celui-ci fonctionne pour moi (au moins dans Chrome et Firefox):

<input type="file" accept="image/*" title="&nbsp;"/>
5
Андрей Куценко

J'ai trouvé une solution, c'est très facile, il suffit de définir un espace dans l'attribut title.

<input type="file" value="" title=" " />
4
JNTN B77

À travers tous les navigateurs et simple. cela l'a fait pour moi 

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

4
Ifeanyi Chukwu

Toutes les réponses ici sont totalement compliquées ou, sinon, totalement fausses.

html:

<div>
    <input type="file" />
    <button>Select File</button>
</div>

css:

input {
    display: none;
}

javascript:

$('button').on('click', function(){
   $('input').trigger('click'); 
});

http://jsfiddle.net/odfe34n8/

J'ai créé ce violon de la manière la plus simpliste. Cliquez sur le bouton Sélectionner un fichier pour afficher le menu de sélection de fichiers. Vous pouvez ensuite styliser le bouton comme vous le souhaitez. Fondamentalement, tout ce que vous avez à faire est de cacher l'entrée du fichier et de déclencher un clic synthétique dessus lorsque vous cliquez sur un autre bouton. Je détecte ce test sur IE 9, FF et Chrome, et tout fonctionne correctement.

4
LadyCailin

Ceci est un problème. Je ne pouvais pas trouver un moyen de sélectionner l'élément 'aucun fichier choisi', j'ai donc créé un masque en utilisant le pseudo sélecteur: after.

Ma solution nécessite également l'utilisation du pseudo sélecteur suivant pour styliser le bouton:

::-webkit-file-upload-button

Essayez ceci: http://jsfiddle.net/J8Wfx/1/

FYI: Cela ne fonctionnera que dans les navigateurs webkit.

P.S si quelqu'un sait comment afficher les pseudo-sélecteurs Webkit comme celui ci-dessus dans l'inspecteur Webkit, faites-le moi savoir.

4
jameswakefield

Pour cela, vous aurez besoin de beaucoup personnaliser le contrôle.

Suivez le guide à l’adresse: http://www.quirksmode.org/dom/inputfile.html

3
Ryan McDonough

Encapsulez et rendez invisible . Travaillez sous Chrome, Safari && FF.

label { 
  padding: 5px;
  background: silver;
}
label > input[type=file] {
    display: none;
}
<label>
  <input type="file">
  select file
</label>

1
Vladimir Ishenko

Il vaut mieux éviter d'utiliser du javascript inutile. Vous pouvez tirer parti de la balise label pour développer la cible de clic de l'entrée de la manière suivante:

<label>
  <input type="file" style="display: none;">
  <a>Open</a>
</label>

Même si l'entrée est masquée, le lien fonctionne toujours comme une cible de clic et vous pouvez le personnaliser à votre guise.

1
TimE

Donnez -webkit-appearance: un essai. Ça vaut le coup d'essayer quand même.

http://css-infos.net/property/-webkit-appearance

J'espère que cela pourra aider :)

1
will

Directement, vous ne pouvez pas modifier grand chose à propos de input [type = fichier].

Faites en sorte que l'opacité du fichier de type d'entrée soit à 0 et essayez de placer un élément relatif [div/span/button] dessus avec du CSS personnalisé 

Essayez ceci http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

1
Champ

Même si vous définissez l'opacité sur zéro, l'info-bulle apparaîtra. Essayez visibility:hidden sur l'élément. Ça marche pour moi.

1
Raa Vijay

Surprise de ne voir personne mentionné à propos de event.preventDefault()

$("input[type=file]").mouseover(function(event) {
    event.preventDefault();
    // This will disable the default behavior of browser
 });
0
Kenny

La meilleure solution, pour moi, consiste à envelopper l'entrée [type = "fichier"] dans un wrapper et à ajouter du code jquery:

$(function(){
	function readURL(input){
        if (input.files && input.files[0]){
            var reader = new FileReader();
            
            reader.onload = function (e){
                $('#uploadImage').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image").change(function(){
        readURL(this);
    });
});
#image{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 75px;
	height: 35px;
}
#uploadImage{
	position: relative;
	top: 30px;
	left: 70px;
}
.button{
	position: relative;
	width: 75px;
	height: 35px;
	border: 1px solid #000;
	border-radius: 5px;
	font-size: 1.5em;
	text-align: center;
	line-height: 34px;
}
<form action="#" method="post" id="form" >
	<div class="button">
		Upload<input type="file" id="image" />
     </div>
     <img id="uploadImage" src="#" alt="your image" width="350" height="300" />
 </form>

0
Alex Black

En combinant certaines des suggestions ci-dessus à l'aide de jQuery, voici ce que j'ai fait:

input[type='file'].unused {
  color: transparent;
}

Et:

$(function() {
  $("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};

Et mettez la classe "inutilisée" sur vos entrées de fichier. Ceci est simple et fonctionne assez bien.

0
Data Helper

Je suis arrivé avec une solution de hacky qui supprime totalement "Aucun fichier choisi" plus l'espace supplémentaire ajouté après ce texte (dans Chrome, j'obtiens quelque chose comme: "Aucun fichier choisi"). 

Cela alourdissait totalement mon alignement de page, alors je me suis vraiment battu pour trouver une solution. Dans l'attribut de style de la balise d'entrée, définir "width" sur la largeur du bouton éliminera le texte et les espaces de fin. Comme la largeur du bouton n’est pas la même dans tous les navigateurs (c’est un peu plus petit dans Firefox, par exemple), vous voudrez également définir la couleur du style sur la même couleur que l’arrière-plan de la page (sinon, un " Non "peut montrer à travers). Ma balise de fichier d'entrée ressemble à ceci: 

<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">
0
TonyLuigiC

Je cherche une bonne réponse pour cela ... et j'ai trouvé ceci:

Commencez par supprimer le "pas de fichier choisi"

input[type="file"]{
font-size: 0px;
}

puis travaillez le bouton avec le -webkit-file-upload-button, de cette façon:

input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}

j'espère que c'est ce que vous cherchiez, cela fonctionne pour moi.

0
devash23

Ça marche pour moi!

input[type="file"]{
  font-size: 0px;
}

Ensuite, vous pouvez utiliser différents types de styles tels que width, height ou d'autres propriétés afin de créer votre propre fichier d'entrée.

0
slorenzo

vous pouvez définir une largeur pour votre élément qui affichera uniquement le bouton et masquera le "pas de fichier choisi".

0
Sotiris