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

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.

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

2. Automatisierter Upload:

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

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

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:

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


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