HTML input file control limits the type of uploaded files
|
Add an input file HTML control to the web page: <input id="File1" type="file" /> By default, all file types will be displayed. What if you want to limit it to only display the file types you set, such as "word", "excel", and "pdf" files?
The solution is to add an accept attribute to it, for example: <input id="File1" type="file" accept=".xls,.doc,.txt,.pdf" /> When this is selected, the default display will be like this:
The file selection box only displays files of your custom file type, which is quite convenient. However, this is just the simplest way to cover up the problem. You can still choose other file types:
Therefore, if you want to truly limit the type of practice (in fact, this is not a restriction, it just displays the file type you want by default, which does not mean that you cannot choose other ones), you still have to control it through js or the background. Attached are the supported file types: *.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video *.ac3 audio/ac3 AC3 Audio *.asf allpication/vnd.ms-asf Advanced Streaming Format *.au audio/basic AU Audio *.css text/css Cascading Style Sheets *.csv text/csv Comma Separated Values *.doc application/msword MS Word Document *.dot application/msword MS Word Template *.dtd application/xml-dtd Document Type Definition *.dwg image/vnd.dwg AutoCAD Drawing Database *.dxf image/vnd.dxf AutoCAD Drawing Interchange Format *.gif image/gif Graphic Interchange Format *.htm text/html HyperText Markup Language *.html text/html HyperText Markup Language *.jp2 image/jp2 JPEG-2000 *.jpe image/jpeg JPEG *.jpeg image/jpeg JPEG *.jpg image/jpeg JPEG *.js text/javascript, application/javascript JavaScript *.json application/json JavaScript Object Notation *.mp2 audio/mpeg， video/mpeg MPEG Audio/Video Stream， Layer II *.mp3 audio/mpeg MPEG Audio Stream, Layer III *.mp4 audio/mp4, video/mp4 MPEG-4 Audio/Video *.mpeg video/mpeg MPEG Video Stream, Layer II *.mpg video/mpeg MPEG Video Stream, Layer II *.mpp application/vnd.ms-project MS Project Project *.ogg application/ogg, audio/ogg Ogg Vorbis *.pdf application/pdf Portable Document Format *.png image/png Portable Network Graphics *.pot application/vnd.ms-powerpoint MS PowerPoint Template *.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow *.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation *.rtf application/rtf, text/rtf Rich Text Format *.svf image/vnd.svf Simple Vector Format *.tif image/tiff Tagged Image Format File *.tiff image/tiff Tagged Image Format File *.txt text/plain Plain Text *.wdb application/vnd.ms-works MS Works Database *.wps application/vnd.ms-works Works Text Document *.xhtml application/xhtml+xml Extensible HyperText Markup Language *.xlc application/vnd.ms-excel MS Excel Chart *.xlm application/vnd.ms-excel MS Excel Macro *.xls application/vnd.ms-excel MS Excel Spreadsheet *.xlt application/vnd.ms-excel MS Excel Template *.xlw application/vnd.ms-excel MS Excel Workspace *.xml text/xml, application/xml Extensible Markup Language *.zip aplication/zip Compressed Archive The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: How to generate PDF and download it in Vue front-end
>>: A brief analysis of MySQL's lru linked list
Recommend
Use standard dl, dt, dd tags to discard table lists
Now, more and more front-end developers are starti...
Vue implementation example using Google Recaptcha verification
In our recent project, we need to use Google robo...
A solution to a bug in IE6 with jquery-multiselect
When using jquery-multiselect (a control that tra...
MySQL 8.0.26 installation and simplified tutorial (the most complete on the Internet)
Table of contents 1. Download MySQL 1.1 Download ...
How to install MySQL 8.0 in Docker
Environment: MacOS_Cetalina_10.15.1, Mysql8.0.18,...
Use Element+vue to implement start and end time limits
This article example shares the specific code for...
Detailed explanation of linux nslookup command usage
[Who is nslookup?] 】 The nslookup command is a ve...
Introduction to the use and disabling of transparent huge pages in Linux
introduction As computing needs continue to grow,...
Example code for implementing hollowing effect with CSS
Effect principle Mainly use CSS gradient to achie...
How to limit the number of concurrent connection requests in nginx
Introduction The module that limits the number of...
A collection of button hover border and background animations based on CSS properties
Heart Attributes opacity: .999 creates a stacking...
js canvas realizes random particle effects
This article example shares the specific code of ...
Summary of 3 minor errors encountered during MySQL 8.0 installation
Preface In the past, the company used the 5.7 ser...
Advantages and disadvantages of MySQL indexes and guidelines for creating indexes
1. Why create an index? (Advantages) This is beca...
Detailed explanation of CSS image splicing technology (sprite image)
CSS image splicing technology 1. Image stitching ...