Comment masquer les éléments d'entrée de fichier et les remplacer par des boutons « Parcourir » ?

Masquage élégant des éléments d'entrée de fichier avec les boutons Parcourir

L'apparence par défaut de <input type="file"> elements comprend un champ de texte qui affiche le chemin du fichier sélectionné. Cependant, pour les situations telles que les téléchargements multi-fichiers où le chemin du fichier n'est pas affiché, vous préférerez peut-être une interface plus simplifiée avec un bouton « Parcourir » visible uniquement.

Pour y parvenir, vous pouvez exploiter CSS et JavaScript :

<input type="file">

Cet extrait de code crée un élément d'entrée de fichier caché avec un ID "selectedFile" et un bouton visible intitulé "Parcourir..." avec un écouteur d'événement onclick. Lorsque vous cliquez sur le bouton, l'événement click de l'élément d'entrée de fichier caché est déclenché, permettant la sélection de fichiers sans le champ de texte visible.

Par exemple, si vous utilisez le code de téléchargement multi-fichiers que vous avez mentionné sur Morningz.com , vous pouvez intégrer cette technique pour améliorer l'interface utilisateur :

<input type="file">

Avec cette modification, votre page de téléchargement multi-fichiers comportera uniquement le bouton "Parcourir...", offrant une interface plus conviviale et expérience simplifiée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!