Wie kann ich das Erscheinungsbild und die Funktionalität eines HTML-Dateieingabeelements anpassen?-CSS-Tutorial-php.cn

Wie kann ich das Erscheinungsbild und die Funktionalität eines HTML-Dateieingabeelements anpassen?

Barbara Streisand

Freigeben： 2024-12-14 00:44:10

Original

650 Leute haben es durchsucht

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

Stileingabetypdatei? [Duplikat]

Das Anpassen des Erscheinungsbilds eines Dateieingabeelements kann eine Herausforderung sein, insbesondere aufgrund von Browserkompatibilitätsproblemen. Es gibt jedoch wirksame Techniken, um dies zu erreichen:

1. HTML- und CSS-Anpassung:

Erstellen Sie ein verstecktes Dateieingabeelement mit
Erstellen Sie eine benutzerdefinierte Schaltfläche mit
und formatieren Sie es mit CSS (Hintergrundbild, Rahmen).
Verwenden Sie JavaScript, um das Klickereignis für die Dateieingabe auszulösen, wenn auf die benutzerdefinierte Schaltfläche geklickt wird.

<form action="#">
  <div>

Nach dem Login kopieren

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

Nach dem Login kopieren

2. Automatisierter Upload:

Um den Datei-Upload-Prozess zu automatisieren, fügen Sie dem Dateieingabeelement ein Onchange-Ereignis hinzu:

<form action="#">
  <div>

Nach dem Login kopieren

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

Nach dem Login kopieren

3. Vollständiges Beispiel:

Dieses umfassende Beispiel enthält den gesamten notwendigen Code für ein voll funktionsfähiges benutzerdefiniertes Datei-Upload-Formular mit automatischer Übermittlung:

<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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich das Erscheinungsbild und die Funktionalität eines HTML-Dateieingabeelements anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!