Beispiel für eine JQuery-Dateiauswahl

JQuery-Dateiauswahl Wählt alle Elemente mit dem Typ Datei aus. Im Allgemeinen können wir sagen, dass es sich um ein Dialogfeld handelt, das eine Baumstruktur mit Ordnern und Dateien anzeigt und es Benutzern ermöglicht, eine Datei aus dem Dateisystem auszuwählen. Es ermöglicht dem Benutzer, jede Art und Anzahl von Dateien auf seinem lokalen Computer auszuwählen und durch das Dateisystem zu navigieren. Die Syntax für den Dateiselektor lautet „:file“, Sie müssen einen Doppelpunkt und einen Tag-Namen verwenden. Schauen wir uns das einfache Beispiel mit der JQuery-Dateiauswahl an.

Syntax der JQuery-Dateiauswahl

$(“:file”)

Es definiert einen Dateiselektor, der alle Elemente des Typs Datei auswählt.

Beispiel für eine JQuery-Dateiauswahl

<!doctype html>
<head>
<title>JQuery File Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery File Selector Example</h2>
<style>
   .myfile
   {
      font-size:15px;
      color:green;
   }
</style>
<script>
   $(document).ready(function(){
      $(":file").css("border", "1px orange solid");
   });
</script>
<body>
   <form>
      Name:<input type="text" name="uname"><br>
      Select File:<input type="file" name="file"  >
   </form>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • $(“:file”).css(“border”, „1px orange solid“); Zeile definiert einen Dateiselektor, der alle Elemente vom Typ Datei auswählt.
  • Wenn wir das obige Skript ausführen, erhalten wir eine Dateiauswahl mit orangefarbenem Rand und zeigen die Zeile „Keine Datei ausgewählt“ mit grüner Farbe an.

Demo zur JQuery-Dateiauswahl

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie die JQuery File Selector-Demo aus

Beispiel für eine JQuery-Dateiauswahl

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen