Ich will das nicht sehen 'keine Datei ausgewählt' für ein file-input-Feld

Einfachste (und zuverlässig soweit ich weiß) hack den ich gefunden habe, ist die anfängliche Farbe der Schrift auf transparenten zu verstecken, die "keine Datei gewählt" - text, und ändern Sie dann die Farbe der Schrift, um etwas sichtbar ändern.

Voilá:

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

InformationsquelleAutor der Antwort Will Jenkins

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

InformationsquelleAutor der Antwort csguimaraes

Lächerlich scheint für die Leichtigkeit, aber für mich war es genug:

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

Getestet auf Chrome 20, Safari 5.1.7, IE 9.

Hinweis: in IE9 ist ein bisschen komisch, weil Links ein mini-input_text Bereich.

InformationsquelleAutor der Antwort jlebrijo

Obwohl dies ist eine alte post, denke ich, dass diese Antwort wird hilfreich sein, jemanden, der will, etwas ähnliches zu tun. Ich wollte einen button einfügen, ein Bild von einem mobilen Gerät die Kamera, aber ich wollte nicht den hässlichen button "[Choose file] Nicht ausgewählte Datei... " Quatsch.

Wollte ich einen button:

• dass ich anpassen könnte z.B. eine image-Taste
• ein Benutzer klicken Sie auf es, und es würde Sie bitten, für einige Datei-Eingabe
• verwenden Sie input und post an einen server

Was ich Tat

1. erstellen Sie ein button-element

   • mit einem onclick="someFunction()" und einige id="some_id"
   • eine img tag mit src="someimage" - um ein Bild anstelle von text

2. erstellen ein input-element

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

3. JavaScript

   • Wenn ich auf die Schaltfläche, es wird das Feuer der clickHiddenInput() Funktion, die ausgeführt wird, die click Fall das element, das Sie wählen,

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

InformationsquelleAutor der Antwort Donald

Ich habe versucht, über die Breite der Einstellungen, aber es funktioniert nicht in firefox. wenn Sie über eine solide konsistente hintergrund, können Sie einfach legen Sie die Farbe die gleiche wie der hintergrund. Ich habe einen weißen hintergrund, sodass ich nur:

input.remove-no-file-chosen
{
   width: 90px;
   color: #fff;
}

InformationsquelleAutor der Antwort haz0rd