Die HTML-Eingabedateisteuerung begrenzt den Typ der hochgeladenen Dateien
|
Fügen Sie der Webseite ein HTML-Steuerelement für die Eingabedatei hinzu: <input id="Datei1" type="Datei" /> Standardmäßig werden alle Dateitypen angezeigt. Was ist, wenn Sie die Anzeige auf die von Ihnen festgelegten Dateitypen beschränken möchten, z. B. „Word“-, „Excel“- und „PDF“-Dateien?
Die Lösung besteht darin, ein Accept-Attribut hinzuzufügen, zum Beispiel: <input id="Datei1" type="file" accept=".xls,.doc,.txt,.pdf" /> Wenn diese Option ausgewählt ist, sieht die Standardanzeige folgendermaßen aus:
Im Dateiauswahlfeld werden nur Dateien Ihres benutzerdefinierten Dateityps angezeigt, was sehr praktisch ist. Dies ist jedoch nur der einfachste Weg, das Problem zu vertuschen. Sie können immer noch andere Dateitypen auswählen:
Wenn Sie die Art der Übung also wirklich einschränken möchten (tatsächlich handelt es sich hierbei nicht um eine Einschränkung, sondern es wird standardmäßig nur der gewünschte Dateityp angezeigt, was nicht bedeutet, dass Sie keine anderen auswählen können), müssen Sie dies dennoch über js oder den Hintergrund steuern. Anbei die unterstützten Dateitypen: *.3gpp Audio/3gpp, Video/3gpp 3GPP Audio/Video *.ac3 audio/ac3 AC3 Audio *.asf allpication/vnd.ms-asf Erweitertes Streaming-Format *.au audio/einfaches AU Audio *.css Text/css Kaskadierende Stylesheets *.csv Text/csv Komma-getrennte Werte *.doc application/msword MS Word-Dokument *.dot application/msword MS Word-Vorlage *.dtd application/xml-dtd Dokumenttypdefinition *.dwg image/vnd.dwg AutoCAD-Zeichnungsdatenbank *.dxf Bild/vnd.dxf AutoCAD Drawing Interchange Format *.gif Bild/gif Grafikaustauschformat *.htm text/html HyperText Markup Language *.html text/html HyperText Markup Language *.jp2 Bild/jp2 JPEG-2000 *.jpe Bild/jpeg JPEG *.jpeg Bild/jpeg JPEG *.jpg Bild/jpeg JPEG *.js Text/Javascript, Anwendung/Javascript JavaScript *.json application/json JavaScript-Objektnotation *.mp2 audio/mpeg, video/mpeg MPEG Audio/Video Stream, Layer II *.mp3 audio/mpeg MPEG-Audiostream, Ebene III *.mp4 Audio/mp4, Video/mp4 MPEG-4 Audio/Video *.mpeg video/mpeg MPEG-Videostream, Ebene II *.mpg video/mpeg MPEG-Videostream, Ebene II *.mpp application/vnd.ms-project MS Project Projekt *.ogg Anwendung/ogg, Audio/ogg Ogg Vorbis *.pdf Anwendung/pdf Portable Document Format *.png Bild/png Portable Netzwerkgrafiken *.pot application/vnd.ms-powerpoint MS PowerPoint-Vorlage *.pps application/vnd.ms-powerpoint MS PowerPoint-Diashow *.ppt application/vnd.ms-powerpoint MS PowerPoint-Präsentation *.rtf Anwendung/rtf, Text/rtf Rich Text Format *.svf Bild/vnd.svf Einfaches Vektorformat *.tif-Bild/tiff-Datei im getaggten Bildformat *.tiff-Bild/tiff-Datei im getaggten Bildformat *.txt text/plain Reiner Text *.wdb application/vnd.ms-works MS Works-Datenbank *.wps application/vnd.ms-works Works-Textdokument *.xhtml Anwendung/xhtml+xml Erweiterbare HyperText Markup Language *.xlc application/vnd.ms-excel MS Excel-Diagramm *.xlm application/vnd.ms-excel MS Excel-Makro *.xls application/vnd.ms-excel MS Excel-Tabelle *.xlt application/vnd.ms-excel MS Excel-Vorlage *.xlw application/vnd.ms-excel MS Excel-Arbeitsbereich *.xml text/xml, application/xml Erweiterbare Auszeichnungssprache *.zip aplication/zip Komprimiertes Archiv Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: So generieren Sie PDFs und laden sie im Vue-Frontend herunter
>>: Eine kurze Analyse der LRU-verknüpften Liste von MySQL
Artikel empfehlen
mysql teilt eine Datenzeile basierend auf Kommas in mehrere Zeilen auf
Inhaltsverzeichnis Trennwirkung Erläuterung der B...
Tutorial zur Installation von VMware ESXi 6.0 und Bereitstellung einer virtuellen Maschine (Bild und Text)
Das Unternehmen hatte einen gut konfigurierten Se...
Durchführung der lokalen Migration von Docker-Images
Ich habe vor Kurzem Docker gelernt und stoße dabe...
Remote-Bereitstellung von Maven-Projekten && So konfigurieren Sie eine Datenbankverbindung mit Tomcat
eins. Remote-Bereitstellung mit Tomcat 1.1 Aufget...
Tiefgreifendes Verständnis des benutzerdefinierten Routing-Managements von React Native
Inhaltsverzeichnis 1. Benutzerdefiniertes Routing...
Detaillierte Analyse des langsamen Abfrageproblems beim Senden von MySQL-Daten
Anhand eines Beispiels habe ich Ihnen die Lösung ...
Detaillierte Erklärung der Anzeigemodi in CSS-Tags
Beschriftungsanzeigemodus (wichtig) Div- und Span...
Detaillierte Erläuterung der Verwendung und Vorsichtsmaßnahmen von Crontab unter Linux
Crontab ist ein Befehl zum Einrichten einer perio...
So ändern Sie die Konfiguration von „create-react-app“, ohne „eject“ zu verwenden
1. Warum wird das Auswerfen nicht empfohlen? 1. W...
So installieren Sie MySQL auf CentOS und richten den Fernzugriff ein
1. Laden Sie die MySQL-Repo-Quelle herunter $ wge...
Detaillierte Schritte zum Erstellen, Ausführen, Veröffentlichen und erstmaligen Abrufen eines Docker-Images
1. Einleitung Wenn Sie früher mit dem Schreiben v...
Details und Beispielcode der MySQL-Replikationstabelle
Detaillierte Erklärung der MySQL-Replikationstabe...
VUE + OPENLAYERS erreicht Echtzeit-Positionierungsfunktion
Inhaltsverzeichnis Vorwort 1. Etikettenstil defin...
Analyse des Prinzips von Nginx unter Verwendung des Lua-Moduls zur Implementierung von WAF
Inhaltsverzeichnis 1. Hintergrund von WAF 2. Was ...
CSS-Code zur Steuerung der Hintergrundfarbe der Webseite
Ich glaube, jeder macht sich oft Sorgen, ob er Bi...