Jak mogę usunąć podpowiedź „Nie wybrano pliku” z pliku wejściowego w Chrome?

Chciałbym usunąć podpowiedź „Nie wybrano pliku” z pliku wejściowego w przeglądarce Google Chrome (widzę, że żadna podpowiedź nie jest wyświetlana w przeglądarce Firefox).

Proszę zauważyć, że nie mówię o tekście wewnątrz pola wejściowego, ale o podpowiedzi, która pojawia się po najechaniu myszą na dane wejściowe.

Próbowałem tego bez powodzenia:

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

Jest to natywna część przeglądarek Webkit i nie można jej usunąć. Powinieneś pomyśleć o hackerskim rozwiązaniu, takim jak zakrywanie lub ukrywanie danych wejściowych pliku.

Hacky rozwiązanie:

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

Skrzypce

Domyślną podpowiedź można edytować za pomocą atrybutu tytułu

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

Ale jeśli spróbujesz usunąć tę wskazówkę

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

To nie zadziała. Oto moja mała sztuczka, aby to zrobić, spróbuj tytułu ze spacją. To będzie działać.:)

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

Dla mnie chciałem, aby tekst był niewidoczny i nadal używał natywnego przycisku przeglądarki.

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

Podobają mi się wszystkie sugestie undefined, ale miałem inny przypadek użycia, mam nadzieję, że pomoże to komuś w tej samej sytuacji.

Znalazłem rozwiązanie, które jest bardzo łatwe, wystarczy ustawić pusty ciąg w atrybucie tytułu.

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

Możesz wyłączyć podpowiedź, ustawiając tytuł ze spacją w przeglądarkach webkit, takich jak Chrome, i pustym ciągiem w przeglądarce Firefox lub IE (testowane na Chrome 35, FF 29, IE 11, Safari mobile)

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

Bardzo łatwo, zapomnij o CSS kierującym się na wejście ["typ"], to nie działa dla mnie. Nie wiem dlaczego. Mam rozwiązanie w tagu HTML

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

Koniec problemu

Wszystkie odpowiedzi tutaj są całkowicie przesadzone lub po prostu całkowicie błędne.

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/

Stworzyłem to skrzypce w najbardziej uproszczony sposób. Kliknięcie przycisku Wybierz plik spowoduje wyświetlenie menu wyboru pliku. Następnie możesz stylizować przycisk w dowolny sposób. Zasadniczo wszystko, co musisz zrobić, to ukryć dane wejściowe pliku i wywołać syntetyczne kliknięcie po kliknięciu innego przycisku. Wyrywkowo przetestowałem to na IE 9, FF i Chrome i wszystkie działają dobrze.

Ten działa dla mnie (przynajmniej w Chrome i Firefox):

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

To jest podchwytliwe. Nie mogłem znaleźć sposobu na wybranie elementu „no file selected”, więc utworzyłem maskę za pomocą pseudo selektora: after.

Moje rozwiązanie wymaga również użycia następującego pseudoselektora do stylizacji przycisku:

::-webkit-file-upload-button

Spróbuj tego: http://jsfiddle.net/J8Wfx/1/

FYI: To będzie działać tylko w przeglądarkach webkit.

PS jeśli ktoś wie, jak wyświetlić pseudo selektory webkit, takie jak ten powyżej w inspektorze webkitów, daj mi znać

We wszystkich przeglądarkach i proste. to zrobiło to dla mnie

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

Aby to osiągnąć, będziesz musiał dostosować sterowanie.

Postępuj zgodnie z przewodnikiem pod adresem : http://www.quirksmode.org/dom/inputfile.html

Owinąć i uczynić niewidzialnym. Pracuj w Chrome, Safari i FF.

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

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

Lepiej unikać niepotrzebnego javascript. Możesz skorzystać z tagu etykiety, aby rozwinąć cel kliknięcia wejścia w następujący sposób:

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

Mimo że dane wejściowe są ukryte, łącze nadal działa jako cel kliknięcia i możesz je dowolnie zmieniać.

Nawet jeśli ustawisz krycie na zero, pojawi się podpowiedź. Przymierz visibility:hiddenelement. To działa dla mnie.

Daj sobie -webkit-appearance:szansę. Mimo wszystko warto spróbować.

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

Mam nadzieję, że to pomoże :)

Bezpośrednio nie możesz zbytnio modyfikować danych wejściowych [typ = plik].

Ustaw krycie pliku typu wejściowego na 0 i spróbuj umieścić na nim element względny [div / span / button] za pomocą niestandardowego CSS

Spróbuj tego http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

Mi to pasuje!

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

Następnie można użyć różnego rodzaju stylów, takich jak width, heightlub innych właściwości w celu stworzenia własnego pliku wejściowego.

Zaskoczenie, że nikt o tym nie wspomniał event.preventDefault()

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

możesz ustawić szerokość elementu, który pokaże tylko przycisk i ukryje "nie wybrano pliku".

Szukam dobrej odpowiedzi na to ... i znalazłem to:

Najpierw usuń „nie wybrano pliku”

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

następnie przerabiaj przycisk z -webkit-file-upload-button, w ten sposób:

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

mam nadzieję, że to jest to, czego szukałeś, działa dla mnie.

Łącząc niektóre z powyższych sugestii, używając jQuery, oto co zrobiłem:

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

I:

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

I umieść klasę „nieużywaną” w plikach wejściowych. To jest proste i działa całkiem nieźle.

Dla mnie najlepszym rozwiązaniem jest zawinięcie danych wejściowych [type = "file"] w opakowanie i dodanie kodu 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>

Wymyśliłem hackerskie rozwiązanie, które całkowicie usuwa „Nie wybrano pliku” oraz dodatkową spację, która jest dodawana po tym tekście (w Chrome pojawia się coś w stylu: „Nie wybrano pliku”).

To całkowicie zepsuło wyrównanie mojej strony, więc naprawdę walczyłem z tym, aby znaleźć rozwiązanie. Wewnątrz atrybutu style znacznika wejściowego ustawienie „width” na szerokość przycisku wyeliminuje końcowy tekst i spacje. Ponieważ szerokość przycisku nie jest taka sama we wszystkich przeglądarkach (jest trochę mniejsza, na przykład w Firefoksie), zechcesz również ustawić kolor stylu na taki sam, jak kolor tła strony (w przeciwnym razie zbłąkany ” Żadne „nie może się wyświetlać). Mój znacznik pliku wejściowego wygląda następująco:

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

Wiem, że to trochę hack, ale wszystko, czego potrzebowałem, to ustawić kolor na przezroczysty w arkuszu stylów - inline wyglądałoby tak, jakby to style = "color: transparent;".