web-dev-qa-db-fra.com

Je ne veux pas voir "aucun fichier choisi" pour un champ de saisie de fichier

Y at-il un moyen où je peux arrêter "no file chosen" pour le fichier de type d'entrée. 

<input type="file" id="field-id" name="html" />
jqueryhtml
40
sachin k

Vous ne pouvez pas vous débarrasser entièrement du "pas de fichier choisi", mais vous pouvez changer le texte en quelque chose de logique en définissant le titre.

<input type="file" title="foo">

affichera "foo" au passage de la souris au lieu de "aucun fichier choisi"

malheureusement,

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

ne fonctionne pas comme vous pouvez l'espérer.

15
Erich Douglass

Le hack le plus simple (et aussi fiable que je le sache) que j'ai trouvé consiste à définir la couleur de police initiale sur transparente pour masquer le texte "Aucun fichier choisi", puis de changer la couleur de la police en un élément visible lors du changement.

Voila:

<input type="file" style="color:transparent;" onchange="this.style.color = 'black';"/>
9
Will Jenkins

Pour les navigateurs Chrome, vous pouvez utiliser cette astuce:

<input type="file" id="myFile" name="html" style="width: 90px;" onchange="this.style.width = '100%';" />

Cela signifie que vous définissez une largeur fixe qui n’affichera que le bouton, puis, après la modification, remettez-le à 100% pour que le nom du fichier s’affiche.

6
Shadow Wizard
<style type="text/css">
#inputcontainer {
    background:url("http://phpfileuploader.com/images/upload.png") no-repeat;
    height:50px;
    width:250px;
}

input[type="file"]{
    opacity:0;
    height:48px;
    width:48px;
}
</style>
<div id="inputcontainer">
    <input type="file" onchange="document.getElementById('file-path').value = this.value.split('\\')[this.value.split('\\').length-1];"/>
    <input type="text" id="file-path"/>
</div>
4
kbtzr

Non, vous devez créer un contrôle personnalisé .

3
alex

Cela semble ridicule pour la facilité mais pour moi c'était suffisant:

input[type='file'] {
  width: 95px;
 }

Testé sur Chrome 20, Safari 5.1.7 et IE 9.

Remarque: dans IE9, c'est un peu bizarre, car il reste une zone mini input_text 

3
jlebrijo

Essayez le code ci-dessous dans l'événement mouseover

jQuery('input').attr('title', '');
3
IshaS

Même s'il s'agit d'un ancien post, je pense que cette réponse sera utile à quelqu'un qui souhaite faire quelque chose de similaire. Je voulais un bouton pour insérer une image à partir de la caméra d'un appareil mobile, mais je ne voulais pas que le bouton laid "[Choisir un fichier] Aucun fichier sélectionné ..." soit une foutaise.

Je voulais un bouton:

  • que je pourrais personnaliser, par exemple avoir un bouton d'image
  • un utilisateur cliquerait dessus et lui demanderait une entrée de fichier
  • utiliser l'entrée et poster sur un serveur

Ce que j'ai fait

  1. créer un élément de bouton

    • avec un onclick="someFunction()" et un certain id="some_id"
    • une balise img avec src="someimage" - pour afficher une image plutôt que du texte

  2. créer un élément d'entrée

    • avec type="file" style"display: none" accept="image/*" capture="camera" id="hidden_input"

  3. JavaScript

    • Lorsque je clique sur le bouton, la fonction clickHiddenInput() sera exécutée et exécutera l'événement click de l'élément choisi.

      function clickHiddenInput() {
    document.getElementById("hidden_input").click();
}

document.getElementById("hidden_input").addEventListener('change', readFile, false);

function readFile(evt) {

    if (!(evt.target.files.length < 1)) {

        var data = new FormData();

        var files = evt.target.files;
        var file = files[0];

        data.append("hidden_input", file);

        // do some stuff with the file
    }
}
2
Donald

Essaye ça:

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

Faites attention à l'espace blanc - c'est important car title = "" ne fonctionne pas.

2
Pavel Nemec

J'ai essayé d'utiliser les paramètres de largeur, mais cela ne fonctionne pas dans Firefox. Si vous avez un arrière-plan cohérent solide, vous pouvez simplement définir la couleur pour qu'elle soit identique à celle de l'arrière-plan. J'ai un fond blanc alors je viens de:

input.remove-no-file-chosen
{
   width: 90px;
   color: #fff;
}
1
haz0rd
input[type=file]{
       opacity:0;
}

Ensuite, vous pouvez concevoir votre boîte quel que soit le style que vous souhaitez. Si vous cliquez sur le div, la fenêtre de l'explorateur de fichiers s'ouvrira.

0
sibaspage