Heim >Web-Frontend >CSS-Tutorial >Wie kann ich das Erscheinungsbild und die Funktionalität eines HTML-Dateieingabeelements anpassen?

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

Barbara StreisandOriginal: 2024-12-14 00:44:10655Durchsuche

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>

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:

<form action="#">
  <div>

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:

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

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!

JavaScript css html for using Event this border background input

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie fülle ich einen Kreis mit einem PNG-Bild mithilfe von SVG-Mustern?Nächster Artikel：Wie fülle ich einen Kreis mit einem PNG-Bild mithilfe von SVG-Mustern?

In Verbindung stehende Artikel

Mehr sehen