Comment puis-je personnaliser l'apparence et les fonctionnalités de l'élément d'entrée de fichier ?

Personnalisation du type d'élément d'entrée de fichier

Cette question est centrée sur la personnalisation du type d'élément d'entrée de fichier, spécifiquement pour implémenter une image d'arrière-plan, ronde bordure et le style potentiel des boutons.

Pour y parvenir sans problème de compatibilité du navigateur, suivez les instructions fournies étapes :

1. Formulaire HTML :

   • Créez un formulaire HTML avec un bouton "Cliquez pour télécharger" (élément avec id=" yourBtn") et une entrée de fichier masquée (élément avec id="upfile", masqué par style).

2. Fonction JavaScript :

   • Ajouter une fonction JavaScript (getFile()) pour déclencher le fichier caché saisie lorsque vous cliquez sur le bouton « Cliquez pour télécharger ».

Cette approche permet style illimité de l'élément d'entrée sans vous soucier des nuances spécifiques au navigateur.

De plus, pour simplifier davantage le processus, voici un exemple complet avec un fichier automatisé télécharger :

HTML :

<style>
#yourBtn {
  position: relative;
  ...
}
</style>
<form action="#" method="POST" enctype="multipart/form-data" name="myForm">
  <div>

JavaScript :

function getFile() {
  document.getElementById("upfile").click();
}
function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}

Ce code combine le style du bouton et le clic gestion des événements avec téléchargement automatique de fichiers en soumettant le formulaire lorsque l'entrée change.

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!