Solution de navigateur de style de fichier de téléchargement de fichier d'entrée prenant en charge les compétences du didacticiel html5

Solution de navigateur de style de fichier de téléchargement de fichier d'entrée prenant en charge les compétences du didacticiel html5_html5

WBOY

Libérer： 2016-05-16 15:50:50

original

1509 Les gens l'ont consulté

Récemment, j'ai utilisé le contrôle de téléchargement de fichiers lors de l'utilisation de Canvas pour traiter les pixels de l'image et j'ai découvert deux problèmes de compatibilité avec le contrôle de téléchargement de fichiers. L’une est que la largeur du contrôle de téléchargement de fichiers ne peut pas être modifiée via CSS dans Firefox, et l’autre est que l’apparence et le comportement du contrôle de téléchargement de fichiers sont différents selon les navigateurs.
Ce qui suit est 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 zone de saisie ou cliquez sur le bouton pour faire apparaître la boîte de sélection de fichier. Cliquer sur la zone de saisie, le bouton ou le texte dans d'autres navigateurs peut déclencher la boîte de sélection de fichier.
Face à ce chaos, il est nécessaire d'unifier les styles et les comportements. Vous trouverez ci-dessous mon schéma de compatibilité.
Jetez d’abord un œil aux captures d’écran des résultats finaux dans chaque navigateur :

Idée de base : créer des zones de saisie 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. Alignez le contrôle de téléchargement de fichier à droite du bouton utilisé pour la simulation. Modifiez l'ordre d'empilement des éléments afin que le bouton soit en bas, le contrôle de téléchargement de fichier soit au milieu et la zone de saisie soit en haut. Une fois la sélection du fichier terminée, attribuez la valeur dans le contrôle de téléchargement de fichier à la zone de saisie 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 il est possible de cliquer sur le côté droit du contrôle de téléchargement de fichiers. Par conséquent, 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 entièrement recouverte par le bouton utilisé pour la simulation. Lorsque le contrôle de téléchargement de fichiers est transparent et que l'utilisateur clique sur le bouton utilisé pour la simulation, la boîte de sélection de fichiers se déclenche. Mais en même temps, l'ordre d'empilement du contrôle de téléchargement de fichier ne peut pas précéder la zone de saisie utilisée pour la simulation. Sinon, lorsque l'utilisateur place la souris sur la zone de saisie qu'il voit, il peut voir que le curseur n'indique pas du texte mais un. flèche (et une flèche La boîte de sélection de fichier apparaîtra lorsque vous cliquerez dessus) et l'utilisateur sera confus.
Implémentation : regardez d’abord la partie html du code.

Copier le code

Le code est le suivant :

Ensuite, il y a la partie CSS du code.

Copier le code

Le code est le suivant :

#file {
position:relative ;
largeur:226px;
hauteur:25px;
bordure:1px #99f
}
#entrée de fichier {
font-size:16px; >marge : 0 ;
remplissage :0 ;
position :relative ;
alignement vertical :milieu
contour :aucun
}
#file input[type="text ; "] {
border:3px aucun;
width:172px;
z-index:4;
}
#file input[type="button"] {
width : 54px;
hauteur:25px;
z-index:2;
#file input[type="file"] {
position:absolute;
height:25px;
opacity:0;
z-index:3;
}

La dernière partie javascript est utilisée pour afficher le chemin du fichier obtenu par le contrôle de téléchargement de fichier jusqu'à ce qu'il soit visible dans la zone de saisie.

Copier le code

Le code est le suivant :

window.onload=function( ){

var file=document.querySelector("#file input[type='file']");

var text=document.querySelector("#file input[type='text']");
file.addEventListener("change",assign,false);
function assign(){
text.value=file.value;
}

Bienvenue Laissez un message pour communiquer ou apporter des corrections.