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
So konfigurieren Sie ein Jupyter-Notebook im Docker-Container
Das Jupyter-Notebook wird unter dem Docker-Contai...
Zehn nützliche und einfache MySQL-Funktionen
Funktion 0. Aktuelle Uhrzeit anzeigen Befehl: sel...
Detaillierte Erläuterung des kostenlosen MySql 5.7.17-Installationskonfigurationstutorials
1. Laden Sie das Installationspaket mysql-5.7.17-...
Native JS-Drag-and-Drop-Funktion zum Erstellen eines Slider-Beispielcodes
Drag & Drop ist eine gängige Funktion im Fron...
Verwenden Sie die Clip-Path-Eigenschaft von CSS, um unregelmäßige Grafiken anzuzeigen
clip-path CSS-Eigenschaften verwenden Clipping, u...
Vue ElementUI Form-Formularvalidierung
Die Formularvalidierung ist eine der am häufigste...
Eingabedatei zur benutzerdefinierten Schaltflächenverschönerung (Demo)
Ich habe schon einmal einen solchen Artikel gesch...
Tutorial zur Installation von MySQL8 auf Centos7
Neue Funktionen in MySQL 8: Meine persönliche Mei...
Linux verwendet lsof/extundelete-Tools, um versehentlich gelöschte Dateien oder Verzeichnisse wiederherzustellen
Vorwort Linux verfügt nicht über einen prominente...
js implementiert ein einfaches Englisch-Chinesisch-Wörterbuch
In diesem Artikel wird der spezifische Code von j...
Beispiel für die Verwendung verschachtelter HTML-Seiten (Frameset-Verwendung)
Code kopieren Der Code lautet wie folgt: <!DOC...
So führen Sie ein Projekt mit Docker aus
1. Geben Sie das Verzeichnis ein, in dem Ihr Proj...
Langer HTML-Text wird automatisch abgeschnitten, wenn er die Tag-Breite überschreitet
Wenn wir langen Text anzeigen, müssen wir auf der ...
Implementierung der Formularübermittlung in HTML
Formularübermittlungscode 1. Quellcode-Analyse &l...
Verschachtelte Verwendungsoperation für MySQL-Aggregatfunktionen
Zweck: Verschachtelte Verwendung von MySQL-Aggreg...