it-swarm.com.de

Wie kann ich die QuickInfo "Keine Datei ausgewählt" aus einer Dateieingabe in Chrome entfernen?

Ich möchte den Tooltip "Keine Datei ausgewählt" aus einer Dateieingabe in Google Chrome entfernen (ich sehe, dass in Firefox kein Tooltip angezeigt wird).

Bitte beachten Sie, dass ich nicht über den Text im Eingabefeld spreche, sondern über die QuickInfo, die angezeigt wird, wenn Sie die Maus über die Eingabe bewegen.

Ich habe das ohne Glück versucht:

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

Dies ist ein ursprünglicher Bestandteil der Webkit-Browser und kann nicht entfernt werden. Sie sollten über eine hackige Lösung nachdenken, wie Abdecken oder Ausblenden der Dateieingaben. 

Eine hacky Lösung:

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

Für mich wollte ich nur, dass der Text unsichtbar ist und weiterhin die native Browser-Schaltfläche verwendet.

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

Ich mag alle Vorschläge von undefined, aber ich hatte einen anderen Anwendungsfall. Ich hoffe, dies hilft jemandem in derselben Situation.

48
Dwayne Forde

die Standard-QuickInfo kann mit dem Titelattribut bearbeitet werden

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

Aber wenn Sie versuchen, diesen Tooltip zu entfernen 

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

Das wird nicht funktionieren. Hier ist mein kleiner Trick, um das zu bearbeiten, versuche den Titel mit einem Leerzeichen. Es wird klappen.:)

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

Sie können die Quick-Info zum Einstellen eines Titels mit einem Leerzeichen in Webkit-Browsern wie Chrome und einer leeren Zeichenfolge in Firefox oder IE deaktivieren (getestet mit Chrome 35, FF 29, IE 11, Safari Mobile).

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

Sehr einfach, vergessen Sie CSS für die Eingabe ["type"], es funktioniert nicht für mich. Ich weiß nicht warum. Ich habe meine Lösung in meinem HTML-Tag erhalten

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

Ende des Problems

5
Lawel

Dies funktioniert für mich (zumindest in Chrome und Firefox):

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

Ich habe eine Lösung gefunden, die ganz einfach ein Leerzeichen in das title-Attribut setzt.

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

In allen Browsern und einfach. das hat es für mich getan 

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

Alle Antworten hier sind völlig unkompliziert oder ansonsten völlig falsch.

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/

Ich habe diese Geige so simpel wie möglich gemacht. Wenn Sie auf die Schaltfläche Datei auswählen klicken, wird das Dateiauswahlmenü angezeigt. Sie können den Button dann beliebig gestalten. Sie müssen lediglich die Dateieingabe ausblenden und einen synthetischen Klick auslösen, wenn Sie auf eine andere Schaltfläche klicken. Ich habe dies vor Ort auf IE 9, FF und Chrome getestet, und alle funktionieren einwandfrei.

4
LadyCailin

Dies ist eine schwierige Frage. Ich konnte keinen Weg finden, um das Element 'no file selected' auszuwählen, also erstellte ich eine Maske mit dem Pseudo-Selektor: after.

Meine Lösung erfordert außerdem die Verwendung des folgenden Pseudo-Selektors, um die Schaltfläche zu gestalten:

::-webkit-file-upload-button

Versuchen Sie folgendes: http://jsfiddle.net/J8Wfx/1/

Zu Ihrer Information: Dies funktioniert nur in Webkit-Browsern.

PS: Wenn jemand weiß, wie man Pseudo-Selektoren für Webkits wie die oben im Webkit-Inspector angezeigten Elemente anzeigt, lass es mich wissen

4
jameswakefield

Sie müssen das Steuerelement ziemlich anpassen, um dies zu erreichen.

Bitte folgen Sie der Anleitung unter: http://www.quirksmode.org/dom/inputfile.html

3
Ryan McDonough

Wrap with und mach unsichtbar . Arbeit in Chrome, Safari && FF.

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

1

Es ist besser zu vermeiden, unnötiges Javascript zu verwenden. Sie können das Label-Tag nutzen, um das Klickziel der Eingabe wie folgt zu erweitern:

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

Obwohl die Eingabe ausgeblendet ist, fungiert der Link weiterhin als Klickziel und Sie können ihn nach Belieben gestalten.

1
TimE

Gib -webkit-appearance: einen Versuch. Es lohnt sich auf jeden Fall.

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

Hoffentlich hilft das :)

1
will

Direkt kann man nicht viel über input [type = file] ändern.

Machen Sie die Deckkraft der Eingabetypdatei: 0 und versuchen Sie, ein relatives Element [div/span/button] mit benutzerdefiniertem CSS darüber zu platzieren 

Probieren Sie das aus http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

1
Champ

Selbst wenn Sie die Deckkraft auf Null setzen, wird die QuickInfo angezeigt. Versuchen Sie visibility:hidden für das Element. Es arbeitet für mich.

1
Raa Vijay

Überraschung, dass niemand etwas über event.preventDefault() erwähnt hat

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

Die beste Lösung für mich ist, die Eingabe [type = "file"] in einen Wrapper zu packen und Jquery-Code hinzuzufügen:

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

Einige der oben genannten Vorschläge mit jQuery kombinieren, habe ich gemacht:

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

Und:

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

Setzen Sie die Klasse "nicht verwendet" in Ihre Dateieingaben. Das ist einfach und funktioniert ziemlich gut.

0
Data Helper

Ich habe eine hacky Lösung gefunden, die "No file selected" und den zusätzlichen Speicherplatz, der nach diesem Text hinzugefügt wird, vollständig entfernt (in Chrome bekomme ich etwa Folgendes: "Keine Datei"). 

Das hat meine Seitenausrichtung total durcheinander gebracht, also habe ich wirklich gekämpft, um eine Lösung zu finden. Wenn Sie im style-Attribut des Eingabe-Tags "width" auf die Breite der Schaltfläche setzen, werden der nachfolgende Text und die Leerzeichen entfernt. Da die Breite der Schaltfläche nicht in allen Browsern gleich ist (in Firefox zum Beispiel etwas kleiner), sollten Sie auch die Farbe des Stils auf die Farbe des Hintergrunds der Seite setzen (ansonsten ein "verirrter" Nein "kann durchscheinen). Mein Eingabedatei-Tag sieht folgendermaßen aus: 

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

Ich suche nach einer guten Antwort ... und ich habe folgendes gefunden:

Löschen Sie zuerst die 'keine Datei ausgewählt'.

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

dann den Button mit dem -webkit-file-upload-button so bearbeiten:

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

ich hoffe, das ist, wonach Sie gesucht haben, es funktioniert für mich.

0
devash23

Für mich geht das!

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

Sie können dann verschiedene Arten von Stilen wie width, height oder andere Eigenschaften verwenden, um Ihre eigene Eingabedatei zu erstellen.

0
slorenzo

sie können eine Breite für Ihr Element festlegen, die nur die Schaltfläche anzeigt und die Option "Keine Datei ausgewählt" blendet.

0
Sotiris