Commentaire: Récemment, j'utilisais le contrôle de téléchargement de fichiers et j'ai trouvé deux problèmes de compatibilité du contrôle de téléchargement de fichiers: l'un est que le contrôle de téléchargement de fichiers ne peut pas modifier la largeur via CSS sous Firefox, et l'autre est que le contrôle de téléchargement de fichiers semble et se comporte différemment sous différents navigateurs. Cet article fournira une solution détaillée.
Récemment, j'ai utilisé le contrôle de téléchargement de fichiers lors de l'utilisation du canevas pour traiter les pixels de l'image, et j'ai trouvé deux problèmes de compatibilité avec le contrôle de téléchargement de fichiers. La première est que le contrôle de téléchargement de fichiers ne peut pas modifier la largeur via CSS sous Firefox, et l'autre est que le contrôle de téléchargement de fichiers semble et se comporte différemment dans différents navigateurs.Vous trouverez ci-dessous une capture d'écran du contrôle de téléchargement de fichiers dans IE10, Firefox16, Chrome22, Opera12, Safari5.1.7:
Dans IE10, double-cliquez sur la case d'entrée ou cliquez sur le bouton pour faire apparaître la zone de sélection des fichiers. Cliquez sur la zone d'entrée, le bouton ou le texte dans d'autres navigateurs peut déclencher la zone de sélection de fichiers.
Compte tenu de cette confusion, il est nécessaire de l'unifier le même et le comportement. Voici ma solution de compatibilité.
Voyons d'abord les captures d'écran du résultat final dans chaque navigateur:
Idée de base: Créez des boîtes d'entrée et des boutons pour simuler les contrôles de téléchargement de fichiers. Définissez le contrôle de téléchargement de fichiers sur transparent. Faites le contrôle de téléchargement de fichier à droite avec le bouton utilisé pour la simulation. Modifiez l'ordre d'empilement des éléments, afin que les boutons soient ci-dessous, le contrôle de téléchargement de fichiers est au milieu et que la boîte d'entrée est ci-dessus. Une fois la sélection de fichiers terminée, affectez la valeur dans le contrôle de téléchargement de fichiers dans la zone d'entrée utilisée pour la simulation.
Principe: Dans différents navigateurs, la hauteur du bouton du contrôle de téléchargement de fichiers est réglable et le côté droit du contrôle de téléchargement de fichiers peut être cliqué. Ainsi, en ajustant la hauteur du contrôle de téléchargement de fichiers et en ajustant la position du contrôle de téléchargement de fichiers (aligné à droite), la zone cliquable du contrôle de téléchargement de fichiers peut être complètement écrasée avec les boutons utilisés pour la simulation. Lorsque le contrôle de téléchargement de fichiers est transparent, l'utilisateur clique sur le bouton de simulation déclenche la zone de sélection de fichiers. Mais en même temps, l'ordre d'empilement des contrôles de téléchargement de fichiers ne peut pas être précédé par la boîte d'entrée utilisée pour la simulation. Sinon, lorsque l'utilisateur place la souris sur la zone d'entrée vue, vous pouvez voir que le curseur n'indique pas le texte mais une flèche (et lorsque vous cliquez en cliquant sous forme de flèche, la boîte de sélection de fichiers apparaîtra) et l'utilisateur sera confus.
Implémentation: jetons d'abord un coup d'œil au code dans la partie HTML.
<div>
<input type = "text" value = "fichier non sélectionné" /> <input type = "bouton" value = "browse" /> <input type = "file" />
</div>
Ensuite, il y a le code pour la partie CSS.
#déposer {
Position: relative;
Largeur: 226px;
hauteur: 25px;
Border: 1px # 99f solide;
}
#File Entrée {
taille de police: 16px;
marge: 0;
rembourrage: 0;
Position: relative;
Adigne vertical: milieu;
Aperçu: aucun;
}
#File Input [Type = "Text"] {
Border: 3px Aucun;
Largeur: 172px;
Z-Index: 4;
}
#File Input [Type = "Button"] {
Largeur: 54px;
hauteur: 25px;
Z-Index: 2;
}
#File Input [type = "file"] {
Position: absolue;
Droite: 0px;
hauteur: 25px;
Opacité: 0;
Z-Index: 3;
}
Enfin, la pièce JavaScript est utilisée pour afficher le chemin de fichier obtenu par le contrôle de téléchargement de fichiers dans la zone d'entrée visible.
window.onload = function () {
var file = document.QuerySelector ("# File Input [type = 'file']");
var text = document.QuerySelector ("# File Input [Type = 'Text']");
file.addeventListener ("modifier", attribution, false);
fonction attribute () {
text.value = file.value;
}
}
Bienvenue pour laisser un message pour communication ou correction.