Come posso rimuovere la descrizione comando "Nessun file scelto" da un file immesso in Chrome?

Vorrei rimuovere il suggerimento "Nessun file scelto" da un file immesso in Google Chrome (vedo che non viene visualizzato alcun suggerimento in Firefox).

Si noti che non sto parlando del testo all'interno del campo di input, ma del suggerimento che appare quando si sposta il mouse sull'input.

L'ho provato senza fortuna:

$('#myFileInput').attr('title', '');

Questa è una parte nativa dei browser webkit e non è possibile rimuoverla. Dovresti pensare a una soluzione hacker come coprire o nascondere gli input del file.

Una soluzione 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, ''))
})    

Violino

Il suggerimento predefinito può essere modificato utilizzando l'attributo title

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

Ma se provi a rimuovere questo suggerimento

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

Questo non funzionerà. Ecco il mio piccolo trucco per funzionare, prova il titolo con uno spazio. Funzionerà.:)

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

Per me, volevo solo che il testo fosse invisibile e continuassi a utilizzare il pulsante del browser nativo.

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

Mi piacciono tutti i suggerimenti di undefined ma ho avuto un caso d'uso diverso, spero che questo aiuti qualcuno nella stessa situazione.

Ho trovato una soluzione molto semplice, basta impostare una stringa vuota nell'attributo title.

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

Puoi disabilitare la descrizione comando impostando un titolo con uno spazio sui browser webkit come Chrome e una stringa vuota su Firefox o IE (testato su Chrome 35, FF 29, IE 11, safari mobile)

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

Molto facile, dimentica il CSS che prende di mira la cosa di input ["type"], non funziona per me. Non so perché Ho la mia soluzione nel mio tag HTML

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

Fine del problema

Tutte le risposte qui sono totalmente complicate, o altrimenti semplicemente totalmente sbagliate.

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/

Ho creato questo violino, nel modo più semplicistico. Facendo clic sul pulsante Seleziona file verrà visualizzato il menu di selezione dei file. Puoi quindi stilizzare il pulsante come preferisci. Fondamentalmente, tutto ciò che devi fare è nascondere l'input del file e attivare un clic sintetico su di esso quando fai clic su un altro pulsante. L'ho provato su IE 9, FF e Chrome e funzionano tutti bene.

Questo funziona per me (almeno in Chrome e Firefox):

<input type="file" accept="image/*" title="&nbsp;"/>

Questo è complicato. Non sono riuscito a trovare un modo per selezionare l'elemento "nessun file scelto", quindi ho creato una maschera utilizzando lo pseudo selettore: after.

La mia soluzione richiede anche l'uso del seguente pseudo selettore per modellare il pulsante:

::-webkit-file-upload-button

Prova questo: http://jsfiddle.net/J8Wfx/1/

FYI: questo funzionerà solo nei browser webkit.

PS se qualcuno sa come visualizzare gli pseudo selettori webkit come quello sopra nell'ispettore webkit, per favore fatemelo sapere

Su tutti i browser e semplice. questo ha fatto per me

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

Dovrai personalizzare molto il controllo per ottenere ciò.

Segui la guida su: http://www.quirksmode.org/dom/inputfile.html

Avvolgi e rendi invisibile. Lavora in Chrome, Safari e FF.

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

<label>
  <input type="file">
  select file
</label>

È meglio evitare di utilizzare javascript non necessari. Puoi sfruttare il tag label per espandere il target di clic dell'input in questo modo:

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

Anche se l'input è nascosto, il collegamento funziona ancora come destinazione del clic e puoi modificarlo come preferisci.

Anche se imposti l'opacità a zero, apparirà il suggerimento. Prova visibility:hiddenl'elemento. Sta funzionando per me.

Per me funziona!

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

Quindi, è possibile utilizzare diversi tipi di stili come width, heighto altre proprietà, al fine di creare il proprio file di input.

Provaci -webkit-appearance:. Vale comunque la pena provare.

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

Spero possa aiutare :)

Direttamente non puoi modificare molto sull'input [tipo = file].

Imposta l'opacità del file del tipo di input: 0 e prova a posizionare un elemento relativo [div / span / button] su di esso con CSS personalizzato

Prova questo http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

Sorpresa di vedere nessuno menzionato event.preventDefault()

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

puoi impostare una larghezza per il tuo elemento che mostrerà solo il pulsante e nasconderà il "nessun file scelto".

Cerco una buona risposta per questo ... e ho trovato questo:

Prima elimina il "nessun file scelto"

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

quindi lavora il pulsante con il -webkit-file-upload-button, in questo modo:

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

spero che questo sia quello che stavi cercando, funziona per me.

Combinando alcuni dei suggerimenti sopra, usando jQuery, ecco cosa ho fatto:

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

E:

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

E metti la classe "inutilizzata" negli input del tuo file. Questo è semplice e funziona abbastanza bene.

La soluzione migliore, per me, è racchiudere l'input [type = "file"] in un wrapper e aggiungere del codice 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>

Ho trovato una soluzione hacky che rimuove totalmente "Nessun file scelto" più lo spazio extra che viene aggiunto dopo quel testo (in Chrome ottengo qualcosa come: "Nessun file scelto").

Questo stava rovinando completamente l'allineamento della mia pagina, quindi ho davvero lottato per trovare una soluzione. All'interno dell'attributo style del tag di input, l'impostazione di "width" alla larghezza del pulsante eliminerà il testo e gli spazi finali. Poiché la larghezza del pulsante non è la stessa in tutti i browser (è un po 'più piccola in Firefox, ad esempio), ti consigliamo di impostare anche il colore dello stile sullo stesso colore dello sfondo della pagina (altrimenti un " No "potrebbe essere visibile). Il tag del mio file di input ha questo aspetto:

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

So che è un po 'un trucco, ma tutto ciò che mi serviva era impostare il colore su trasparente nel foglio di stile - inline sarebbe simile a questo style = "color: transparent;".