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

r囧r小猫 2024-04-18 08:34 60阅读 0赞

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

### 1、允许上传文件数量 ###

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

### 2、上传指定的文件格式 ###

如指定默认格式为gif、png：

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

这里的上传格式**仅指打开上传弹窗选择文件时默认的文件格式**，也可选择文件时手动修改成所有文件(\*)，如下图：  
![在这里插入图片描述][20190904095039381.png]

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

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

**同时限制上传.xls、.xlsx文件**

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

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

### 3.其他的accept的接受格式 ###

<table> 
 <tbody> 
  <tr> 
   <td>*.3gpp</td> 
   <td>audio/3gpp, video/3gpp</td> 
   <td>3GPP Audio/Video</td> 
  </tr> 
  <tr> 
   <td>*.ac3</td> 
   <td>audio/ac3</td> 
   <td>AC3 Audio</td> 
  </tr> 
  <tr> 
   <td>*.asf</td> 
   <td>allpication/vnd.ms-asf</td> 
   <td>Advanced Streaming Format</td> 
  </tr> 
  <tr> 
   <td>*.au</td> 
   <td>audio/basic</td> 
   <td>AU Audio</td> 
  </tr> 
  <tr> 
   <td>*.css</td> 
   <td>text/css</td> 
   <td>Cascading Style Sheets</td> 
  </tr> 
  <tr> 
   <td>*.csv</td> 
   <td>text/csv</td> 
   <td>Comma Separated Values</td> 
  </tr> 
  <tr> 
   <td>*.doc</td> 
   <td>application/msword</td> 
   <td>MS Word Document</td> 
  </tr> 
  <tr> 
   <td>*.dot</td> 
   <td>application/msword</td> 
   <td>MS Word Template</td> 
  </tr> 
  <tr> 
   <td>*.dtd</td> 
   <td>application/xml-dtd</td> 
   <td>Document Type Definition</td> 
  </tr> 
  <tr> 
   <td>*.dwg</td> 
   <td>image/vnd.dwg</td> 
   <td>AutoCAD Drawing Database</td> 
  </tr> 
  <tr> 
   <td>*.dxf</td> 
   <td>image/vnd.dxf</td> 
   <td>AutoCAD Drawing Interchange Format</td> 
  </tr> 
  <tr> 
   <td>*.gif</td> 
   <td>image/gif</td> 
   <td>Graphic Interchange Format</td> 
  </tr> 
  <tr> 
   <td>*.htm</td> 
   <td>text/<span>html</span></td> 
   <td>HyperText Markup Language</td> 
  </tr> 
  <tr> 
   <td>*.<span>html</span></td> 
   <td>text/<span>html</span></td> 
   <td>HyperText Markup Language</td> 
  </tr> 
  <tr> 
   <td>*.jp2</td> 
   <td>image/jp2</td> 
   <td>JPEG-2000</td> 
  </tr> 
  <tr> 
   <td>*.jpe</td> 
   <td>image/jpeg</td> 
   <td>JPEG</td> 
  </tr> 
  <tr> 
   <td>*.jpeg</td> 
   <td>image/jpeg</td> 
   <td>JPEG</td> 
  </tr> 
  <tr> 
   <td>*.jpg</td> 
   <td>image/jpeg</td> 
   <td>JPEG</td> 
  </tr> 
  <tr> 
   <td>*.js</td> 
   <td>text/javascript, application/javascript</td> 
   <td>JavaScript</td> 
  </tr> 
  <tr> 
   <td>*.json</td> 
   <td>application/json</td> 
   <td>JavaScript Object Notation</td> 
  </tr> 
  <tr> 
   <td>*.mp2</td> 
   <td>audio/mpeg, video/mpeg</td> 
   <td>MPEG Audio/Video Stream, Layer II</td> 
  </tr> 
  <tr> 
   <td>*.mp3</td> 
   <td>audio/mpeg</td> 
   <td>MPEG Audio Stream, Layer III</td> 
  </tr> 
  <tr> 
   <td>*.mp4</td> 
   <td>audio/mp4, video/mp4</td> 
   <td>MPEG-4 Audio/Video</td> 
  </tr> 
  <tr> 
   <td>*.mpeg</td> 
   <td>video/mpeg</td> 
   <td>MPEG Video Stream, Layer II</td> 
  </tr> 
  <tr> 
   <td>*.mpg</td> 
   <td>video/mpeg</td> 
   <td>MPEG Video Stream, Layer II</td> 
  </tr> 
  <tr> 
   <td>*.mpp</td> 
   <td>application/vnd.ms-project</td> 
   <td>MS Project Project</td> 
  </tr> 
  <tr> 
   <td>*.ogg</td> 
   <td>application/ogg, audio/ogg</td> 
   <td>Ogg Vorbis</td> 
  </tr> 
  <tr> 
   <td>*.pdf</td> 
   <td>application/pdf</td> 
   <td>Portable Document Format</td> 
  </tr> 
  <tr> 
   <td>*.png</td> 
   <td>image/png</td> 
   <td>Portable Network Graphics</td> 
  </tr> 
  <tr> 
   <td>*.pot</td> 
   <td>application/vnd.ms-powerpoint</td> 
   <td>MS PowerPoint Template</td> 
  </tr> 
  <tr> 
   <td>*.pps</td> 
   <td>application/vnd.ms-powerpoint</td> 
   <td>MS PowerPoint Slideshow</td> 
  </tr> 
  <tr> 
   <td>*.ppt</td> 
   <td>application/vnd.ms-powerpoint</td> 
   <td>MS PowerPoint Presentation</td> 
  </tr> 
  <tr> 
   <td>*.rtf</td> 
   <td>application/rtf, text/rtf</td> 
   <td>Rich Text Format</td> 
  </tr> 
  <tr> 
   <td>*.svf</td> 
   <td>image/vnd.svf</td> 
   <td>Simple Vector Format</td> 
  </tr> 
  <tr> 
   <td>*.tif</td> 
   <td>image/tiff</td> 
   <td>Tagged Image Format File</td> 
  </tr> 
  <tr> 
   <td>*.tiff</td> 
   <td>image/tiff</td> 
   <td>Tagged Image Format File</td> 
  </tr> 
  <tr> 
   <td>*.<span>txt</span></td> 
   <td>text/plain</td> 
   <td>Plain Text</td> 
  </tr> 
  <tr> 
   <td>*.wdb</td> 
   <td>application/vnd.ms-works</td> 
   <td>MS Works Database</td> 
  </tr> 
  <tr> 
   <td>*.wps</td> 
   <td>application/vnd.ms-works</td> 
   <td>Works Text Document</td> 
  </tr> 
  <tr> 
   <td>*.x<span>html</span></td> 
   <td>application/x<span>html+xml</span></td> 
   <td>Extensible HyperText Markup Language</td> 
  </tr> 
  <tr> 
   <td>*.xlc</td> 
   <td>application/vnd.ms-excel</td> 
   <td>MS Excel Chart</td> 
  </tr> 
  <tr> 
   <td>*.xlm</td> 
   <td>application/vnd.ms-excel</td> 
   <td>MS Excel Macro</td> 
  </tr> 
  <tr> 
   <td>*.xls</td> 
   <td>application/vnd.ms-excel</td> 
   <td>MS Excel Spreadsheet</td> 
  </tr> 
  <tr> 
   <td>*.xlt</td> 
   <td>application/vnd.ms-excel</td> 
   <td>MS Excel Template</td> 
  </tr> 
  <tr> 
   <td>*.xlw</td> 
   <td>application/vnd.ms-excel</td> 
   <td>MS Excel Workspace</td> 
  </tr> 
  <tr> 
   <td>*.xml</td> 
   <td>text/xml, application/xml</td> 
   <td>Extensible Markup Language</td> 
  </tr> 
  <tr> 
   <td>*.zip</td> 
   <td>aplication/zip</td> 
   <td>Compressed Archive</td> 
  </tr> 
 </tbody> 
</table>

[20190904095039381.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6fc195492d734aaf965b3eb299d0af7f.png