Eingabedatei nicht öffnen Datei-Upload-Feld auf IE

Ich habe ein label Element, das zusammen mit seiner entsprechenden input type="file" auch eine img zwischen zwei span Elemente eingebettet enthält.Eingabedatei nicht öffnen Datei-Upload-Feld auf IE

Die input selbst ist als display:none deklariert, so dass die label die Aufgabe ausführen kann, die Datei hochladen-Box zu starten, wenn ein Element darin geklickt wird. Dies funktioniert natürlich in jedem großen Browser außer IE. In IE, in den labelanderen als die überall klicken img wird die Datei-Upload-Box starten, aber Sie auf den Button img wird nicht ...

Sie dieses Problem durch Öffnen this fiddle in IE neben jedem anderen Browser repliziert sehen kann.

Seltsamerweise kann das Problem bis auf das Vorhandensein der form isoliert werden. Wenn der form Wrapper aus irgendeinem Grund entfernt wird, funktioniert das Etikett korrekt. Ich kann das natürlich nicht als Lösung verwenden. Gedanken?

Quelle

2017-10-31 Tom

Als Abhilfe können Sie drehen kann 'paperclip' in einer Spanne mit einem Hintergrundbild. Dies funktioniert, siehe [updated fiddle] (https://jsfiddle.net/MrLister/de531suo/6/); Es ist jedoch keine Lösung, also nicht als Antwort posten. –

@MrLister Danke dafür. Ich kann in meinem Code duplizieren, und es funktioniert in der Tat ordnungsgemäß als eine Problemumgehung. Wie Sie gesagt haben, ist es keine Lösung. – Tom

Nun, IE stimmt mit der Spezifikation überein, dass das Label keine Elemente enthalten darf, einschließlich Ihres img-Tags, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label –

Es ist ein bekannter Fehler im IE Sie es in Microsoft Connect

zu lösen einfach hinzufügen pointer-events: none; zur <img>

Es kann einige Browser dazu führen, dass das Bild zu markieren, wenn darauf geklickt wird, sehen. Um dies zu vermeiden, machen Sie das Bild nicht auswählbar.

Die vollständige Lösung ist:

.selector-for-image { 
    pointer-events: none; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

Siehe updated JSFiddle

Quelle

2017-11-03 21:16:41

Eingabedatei nicht öffnen Datei-Upload-Feld auf IE

Antwort

Verwandte Themen