Kommentar: Kürzlich habe ich die Datei -Upload -Steuerung verwendet und zwei Kompatibilitätsprobleme der Datei -Upload -Steuerung gefunden: Eine ist, dass die Datei -Upload -Steuerung die Breite nicht durch CSS unter Firefox ändern kann und die andere das Datei -Upload -Steuerelement unter verschiedenen Browsern unterschiedlich aussieht und sich anders verhält. Dieser Artikel enthält eine detaillierte Lösung.
Kürzlich habe ich die Datei -Upload -Steuerung verwendet, wenn ich Canvas verwendete, um Bildpixel zu verarbeiten, und zwei Kompatibilitätsprobleme mit der Datei -Upload -Steuerung gefunden. Eine davon ist, dass die Datei -Upload -Steuerung die Breite nicht durch CSS unter Firefox ändern kann, und die andere ist, dass das Datei -Upload -Steuerelement in verschiedenen Browsern unterschiedlich aussieht und sich anders verhält.Unten finden Sie einen Screenshot der Datei -Upload -Steuerung in IE10, Firefox16, Chrome22, Opera12, Safari5.1.7:
Doppelklicken Sie in IE10 auf das Eingabefeld oder klicken Sie auf die Schaltfläche, um das Feld "Dateiauswahl" zu aktualisieren. Durch Klicken auf die Schaltfläche Eingabe, die Schaltfläche oder den Text in anderen Browsern kann das Feld "Dateiauswahl" ausgelöst werden.
Angesichts dieser Verwirrung ist es notwendig, dasselbe und Verhalten zu vereinen. Hier ist meine Kompatibilitätslösung.
Schauen wir uns zunächst die Screenshots des Endergebnisses in jedem Browser an:
Grundidee: Erstellen Sie Eingangsfelder und Schaltflächen, um die Datei -Upload -Steuerelemente zu simulieren. Stellen Sie die Datei -Upload -Steuerung auf transparent ein. Lassen Sie die Datei mit der für die Simulation verwendeten Schaltfläche rechtsausrichtung rechtzeitig hochladen. Ändern Sie die Stapelreihenfolge der Elemente, so dass die Schaltflächen unten sind, die Datei -Upload -Steuerung in der Mitte und das Eingabefeld oben. Nachdem die Dateiauswahl abgeschlossen ist, weisen Sie den Wert in der Datei -Upload -Steuerung dem für die Simulation verwendeten Eingabefeld zu.
Prinzip: In verschiedenen Browsern ist die Höhe der Schaltfläche der Datei -Upload -Steuerung einstellbar, und die rechte Seite der Datei -Upload -Steuerung kann geklickt werden. Durch Anpassen der Höhe des Datei-Upload-Steuerelements und der Anpassung der Position der Datei-Upload-Steuerung (rechts ausgerichtet) kann der anklickbare Bereich der Datei-Upload-Steuerung mit den für die Simulation verwendeten Schaltflächen vollständig überschrieben werden. Wenn die Datei -Upload -Steuerung transparent ist, klickt der Benutzer auf die Schaltfläche für die Simulation das Feld "Dateiauswahl". Gleichzeitig kann der Stapelreihenfolge der Datei -Upload -Steuerelemente das für die Simulation verwendete Eingabefeld nicht vorausgehen. Andernfalls sehen Sie, dass der Cursor nicht den Text angibt, sondern einen Pfeil (und beim Klicken als Pfeil wird das Feld "Dateiauswahl angezeigt) und der Benutzer wird verwirrt.
Implementierung: Schauen wir uns den Code im HTML -Teil zuerst an.
<div>
<Eingabe type = "text" value = "Datei nicht ausgewählt" /> <Eingabe type = "Schaltfläche" value = "Durchsuchen" /> <Eingabe type = "Datei" />
</div>
Dann gibt es den Code für den CSS -Teil.
#Datei {
Position: Relativ;
Breite: 226px;
Höhe: 25px;
Grenze: 1PX #99f Solid;
}
#Dateieingabe {
Schriftgröße: 16px;
Rand: 0;
Polsterung: 0;
Position: Relativ;
vertikaler Align: Mitte;
Umriss: Keine;
}
#file input [type = "text"] {
Grenze: 3px keine;
Breite: 172px;
Z-Index: 4;
}
#file input [type = "button"] {
Breite: 54px;
Höhe: 25px;
Z-Index: 2;
}
#file input [type = "file"] {
Position: absolut;
Rechts: 0px;
Höhe: 25px;
Deckkraft: 0;
Z-Index: 3;
}
Schließlich wird der JavaScript -Teil verwendet, um den von der Datei -Upload -Steuerung erhaltenen Dateipfad in das sichtbare Eingabefeld anzuzeigen.
window.onload = function () {
var file = document.querySelector ("#Dateieingabe [type = 'file']");
var text = document.querySelector ("#Dateieingabe [type = 'text']");
Datei.AdDeVentListener ("ändern", zuweisen, false);
Funktion ordnungsgemäß () {
text.Value = Datei.Value;
}
}
Willkommen, eine Nachricht für Kommunikation oder Korrektur zu hinterlassen.