input的type=file上传文件accept中限制文件类型pdf、doc、docx、 jpg、 png、xls 、xlsx等格式

小鱼儿 2023-10-11 16:02 65阅读 0赞

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

1、允许上传文件数量

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

2、上传指定的文件格式

如指定默认格式为gif、png：  
<input type="file" accept="image/gif,image/png" />  
1  
如果不限制上传图片的格式，只限制图片可写成：accept="image/\*"

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

限制上传.xls、.xlsx文件：

//限制.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">  
1  
这只是指定了选择文件的默认类型，真实限制类型还要用到JS代码

if (\['xls','xlsx'\].indexOf(FileExt.toLowerCase()) === -1)\{  
this.$message.warning('只能上传.XLS.XLSX格式的文件!');  
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