Améliorer les contrôles de téléchargement de fichiers à l'aide de jQuery

Lorsque vous utilisez CSS pour embellir des éléments de formulaire, il n'y a jamais eu de bon moyen d'embellir le contrôle de téléchargement de fichiers. http://www.quirksmode.org/dom/inputfile.html (le site Web semble avoir une erreur) fournit une méthode pour embellir le contrôle de téléchargement de fichiers. Inspiré par cette méthode, j'ai combiné mes propres projets pour améliorer ses fonctionnalités. Après améliorations, il présente les caractéristiques suivantes :

1. Ce que l'utilisateur voit n'est pas un bouton de téléchargement de fichier, mais un bouton ;
2. Le format des images peut être restreint ;
3. Les images sélectionnées par l'utilisateur peuvent être affichées dans une zone spécifique (sauf IE6, safari et opera) ;
4. Le contrôle de téléchargement de fichiers reste disponible lorsque l'utilisateur désactive js.

Je l'ai encapsulé dans un plug-in jQuery. Puisqu'il existe déjà un plug-in appelé jQuery.fakeFile sur Internet, afin de le distinguer, je le nommerai jQuery.liveFakeFile. Cet article présentera le principe et l'utilisation de cette méthode.

1. Demande

L'exigence est très simple, mais sa mise en œuvre nécessite certaines compétences, qui sont brièvement décrites comme suit :

1. Il est nécessaire que le contrôle de téléchargement de fichier n'apparaisse pas, mais un bouton « télécharger une image ». Lorsque l'utilisateur clique sur le bouton, une boîte de dialogue d'image apparaît ;
2. Après avoir sélectionné une image, l'image s'affiche au-dessus du bouton. Par défaut, l'image par défaut est affichée ;
3. Le format de l'image sélectionnée est jugé. Une fois qu'elle ne répond pas aux exigences, un message d'erreur s'affiche sous le bouton et l'image par défaut s'affiche.

2. Analyse

Réalisez l'effet d'afficher la boîte de dialogue de sélection d'image en cliquant sur le bouton

Il y a une zone de saisie devant le contrôle de téléchargement de texte Inspiré par Michael McGrady ( ljzcome une fois traduit cet article), nous créons un bouton "télécharger l'image", puis modifions la propriété d'opacité du contrôle de téléchargement de fichier, la définissons sur 0, et utilisez la propriété de positionnement pour faire en sorte que la zone de clic se trouve au-dessus du bouton. De cette façon, chaque clic de l'utilisateur semble être un bouton cliqué, mais en fait il s'agit du contrôle de téléchargement de texte lui-même.

Afficher les images sélectionnées par l'utilisateur

L'affichage des images semble très simple, mais il existe des différences entre les navigateurs. IE6 ne peut pas afficher les images correctement et IE7 peut les afficher en utilisant le filtre AlphaImageLoder. Firefox ne peut pas afficher les images normalement, mais il dispose d'une méthode pour afficher les images : getAsDataURL(). Les autres navigateurs Opera et Safari ne peuvent pas afficher les images correctement. Par conséquent, nous utilisons la technologie de détection de navigateur pour traiter différents navigateurs séparément et permettre uniquement aux navigateurs qui ne peuvent pas afficher d'images d'afficher normalement du texte.

Déterminer le format de l'image

Vous ne devez réussir la vérification de l'expression régulière que lorsque l'événement de changement du contrôle de téléchargement de fichier est déclenché. Une fois les exigences de format remplies, l'image ou le texte d'invite sera affiché, sinon un message d'erreur s'affichera.

analyse d'utilisabilité

Étant donné que js est utilisé pour modifier l'apparence du contrôle de téléchargement de fichiers, il faut s'assurer que les utilisateurs peuvent télécharger des images normalement lorsque js est désactivé. Donc, ce que nous plaçons dans la structure HTML devrait être un contrôle de téléchargement de fichier normal.