登录 |  注册
首页 >  编程语言 >  HTML入门基础教程_学习笔记 >  input的type=file设置限制文件类型格式

input的type=file设置限制文件类型格式

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

1、允许上传文件数量

  • 允许选择多个文件:<input type="file" multiple>

  • 只允许上传一个文件:<input type="file" single>

2、上传指定的文件格式

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

<input type="file" accept="image/gif,image/png" />

如果不限制上传图片的格式,只限制图片可写成: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">

这只是指定了选择文件的默认类型,真实限制类型还要用到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

上一篇: HTML常用属性手册
下一篇: input框不可编辑能被选中属性设置
推荐文章
  • 雪花算法(Snowflake)是由Twitter开发的一种分布式ID生成算法,旨在为分布式系统提供一种简单而有效的方式,以生成全局唯一、有序且可排序的64位整数ID。这种ID通常用作数据库记录的主键或其他需要唯一标识符的场景。雪花算法生成的64位ID结构如下:最高位(第64位):固定为0,因为64位
  • 在HTML中,如果你想让一个输入框(input元素)不可编辑,你可以通过设置其readonly属性来实现。示例如下:input type="text" value="此处内容不可编辑" readonly在上述代码中,readonly属性使得用户无法修改输入框中的内容。另外,如果你希望输入框完全不可交
  • ASP.NET教程ASP.NET又称为ASP+,基于.NETFramework的Web开发平台,是微软公司推出的新一代脚本语言。ASP.NET是一个使用HTML、CSS、JavaScript和服务器脚本创建网页和网站的开发框架。ASP.NET支持三种不一样的开发模式:WebPages(Web页面)、
  • C# 判断判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的)。下面是大多数编程语言中典型的判断结构的通常形式:判断语句C#提供了以下类型的判断语句。点击链接查看每个语句的细节。语句描述if语句一个 if语句 由一个布尔表达式后跟
  • C#循环有的时候,可能需要多次执行同一块代码。通常情况下,语句是顺序执行的:函数中的第一个语句先执行,接着是第二个语句,依此类推。编程语言提供了允许更为复杂的执行路径的多种控制结构。循环语句允许我们多次执行一个语句或语句组,下面是大多数编程语言中循环语句的通常形式:循环类型C#提供了以下几种循环类型
  • C#数组(Array)数组是一个存储相同类型元素的固定大小的顺序集合。数组是用来存储数据的集合,一般认为数组是一个同一类型变量的集合。声明数组变量并不是声明number0、number1、...、number99一个个单独的变量,而是声明一个就像numbers这样的变量,然后使用numbers[0]
学习大纲