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
Sorgen Sie für eine schnelle Website
Ist Leistung wirklich wichtig? Leistung ist wicht...
Front-End-KI-Schnitttipps (Erfahrung)
Das AI-Bildschneiden muss mit PS koordiniert werd...
So erstellen Sie MySQL-Indizes richtig
Die Indizierung ähnelt dem Erstellen bibliografis...
jQuery-Plugin zum Implementieren eines schwebenden Menüs
Lernen Sie jeden Tag ein schwebendes jQuery-Plug-...
Diagramm der Installationszusammenfassung für MySQL 8.0.11
Installationsumgebung: CAT /etc/os-release Zeigt ...
Eine kurze Erläuterung zum Festlegen der absoluten CSS-Position relativ zum übergeordneten Element
Wie wir alle wissen, wird die absolute CSS-Positi...
Implementierungscodebeispiel für die lokale Verzeichniszuordnung von Nginx
Manchmal müssen Sie auf einige statische Ressourc...
Linux verwendet NetworkManager, um Ihre MAC-Adresse zufällig zu generieren
Egal, ob Sie zu Hause auf dem Sofa oder draußen i...
Auszeichnungssprache – CSS-Stil für Webanwendungen
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Tutorial zur HTML-Tabellenauszeichnung (37): Hintergrundbild-Attribut BACKGROUND
Legen Sie das Hintergrundbild für die Tabellenübe...
Analyse des MySQL-Client-Installationsprozesses auf dem Mac
Versuchen Sie die Installation über Pip in einer ...
Das WeChat-Applet implementiert eine einfache handschriftliche Signaturkomponente
Inhaltsverzeichnis Hintergrund: brauchen: Wirkung...
UrlRewriter-Caching-Probleme und eine Reihe damit verbundener Untersuchungen
Beim Entwickeln einer Website-Funktion kann der S...
So verwenden Sie Docker-Compsoe zum Bereitstellen eines Projekts mit Front-End- und Back-End-Trennung
Sag es im Voraus Wir alle wissen, dass Docker ein...
Responsive Webdesign lernen (2) — Können Videos responsiv gemacht werden?
Rezension der vorherigen Folge: Gestern haben wir...