input的type=file上传文件accept中限制文件类型

IE9及以下不支持下面这些功能，其它浏览器最新版本均已支持。

 

1、允许上传文件数量

• 允许选择多个文件：<input type="file" multiple>
• 只允许上传一个文件：<input type="file" single>

 2、上传指定的文件格式

如指定默认格式为gif、png：<input type="file" accept="image/gif,image/png" />

如果不限制上传图片的格式，只限制图片可写成：accept="image/*"

这里的上传格式仅指打开上传弹窗选择文件时默认的文件格式，也可选择文件时手动修改成所有文件(*)

 

限制.xls文件:accept="application/vnd.ms-excel"    

限制.xlsx文件:accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

同时限制上传.xls、.xlsx文件:<input class="note-image-input form-control" type="file" name="files" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel " multiple="multiple">

 

这只是指定了选择文件的默认类型，真实限制类型还要用到JS代码

 if (['xls','xlsx'].indexOf(FileExt.toLowerCase()) === -1){
          this.$message.warning('只能上传.XLS.XLSX格式的文件!');
          return false;
     }   

 

 if (!['xlsx', 'xls'].includes(suffix)) {
            prompt.error(
                // @ts-ignore
                window.intl.formatMessage(
                    {
                        id: 'components.FileTypeError',
                        defaultMessage: '只允许上传{errorText}格式的文件',
                    },
                    { errorText: '.xlsx, .xls' }
                )
            );
            return false;
        }

 

3.其他的accept的接受格式

*.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