Comment puis-je personnaliser l'apparence et les fonctionnalités d'un élément d'entrée de fichier HTML ?-tutoriel CSS-php.cn

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

Barbara Streisand

Libérer： 2024-12-14 00:44:10

original

650 Les gens l'ont consulté

How Can I Customize the Appearance and Functionality of an HTML File Input Element?

Fichier de type d'entrée de style ? [duplicata]

La personnalisation de l'apparence d'un élément d'entrée de fichier peut être difficile, notamment en raison de problèmes de compatibilité du navigateur. Il existe cependant des techniques efficaces pour y parvenir :

1. Personnalisation HTML et CSS :

Créez un élément d'entrée de fichier caché à l'aide de
Créez un bouton personnalisé à l'aide de
et stylisez-le à l'aide de CSS (image d'arrière-plan, bordure).
Utilisez JavaScript pour déclencher l'événement de clic sur l'entrée du fichier lorsque vous cliquez sur le bouton personnalisé.

<form action="#">
  <div>

Copier après la connexion

function getFile() {
  document.getElementById("upfile").click();
}

Copier après la connexion

2. Téléchargement automatisé :

Pour automatiser le processus de téléchargement de fichiers, ajoutez un événement onchange à l'élément d'entrée du fichier :

<form action="#">
  <div>

Copier après la connexion

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

Copier après la connexion

3. Exemple complet :

Cet exemple complet comprend tout le code nécessaire pour un formulaire de téléchargement de fichiers personnalisé entièrement fonctionnel avec soumission automatisée :

<html>
<style>
  #yourBtn {
    position: relative;
    top: 150px;
    font-family: calibri;
    width: 150px;
    padding: 10px;
    border-radius: 5px;
    border: 1px dashed #BBB;
    text-align: center;
    background-color: #DDD;
    cursor: pointer;
  }
</style>
<script type="text/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();
  }
</script>

<body>
  <center>
    <form action="#" method="POST" enctype="multipart/form-data" name="myForm">
      <div>

Copier après la connexion

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!