(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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐