Mrcdh技术博客 Mrcdh技术博客
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Mrcdh

立志于全桟开发
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Html5

    • 使用频繁的网页元信息
    • input file 上传文件指定文件类型
      • 使用 accept 属性限制文件类型
      • 多种文件类型限制
    • Less和Scss语法对比
    • HTTP常见响应码
    • iframe常用操作
    • h5操作媒体设备(音频和视频)
    • canvas的基本使用
    • 手机网页自适应
    • 常用CSS
    • CSS布局-多列布局
    • scss使用常见问题
  • JavaScript

  • Nodejs

  • express

  • electron

  • Android

  • 微信公众号

  • 框架

  • 其他

  • selenium

  • Sequelize

  • 大前端
  • Html5
mrcdh
2020-11-22
目录

input file 上传文件指定文件类型

# 使用 accept 属性限制文件类型

input file 类型控件有一个属性,名为 accept。它可以用来指定浏览器接受的文件类型,也就当我们打开系统的选择文件弹框的时候,默认界面中呈现的文件类型。

只能选择 JSON 文件

<input type="file" accept=".json">
1

只能选择 图片 文件

<input type="file" accept="image/*">
1
  • 视频:video/*
  • 音频:audio/*
  • gif图片:image/gif
  • 只允许上传wav(一般用于铃声上传):.wav
  • excel文件:application/msexcel
  • word文件:application/msword
  • zip文件:application/zip
  • text文件:text/plain
  • js文件:text/javascript,application/javascript

# 多种文件类型限制

如果想支持多种类型的话,只要在 accept 里面放置多个属性就可以了(英文逗号隔开)。

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

附录:支持的文件类型

文件 类型 描述
*.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
#html5
上次更新: 2020/11/22, 11:11:00
使用频繁的网页元信息
Less和Scss语法对比

← 使用频繁的网页元信息 Less和Scss语法对比→

最近更新
01
python之Anaconda(conda)版本管理
03-24
02
electron文件缓存
02-16
03
vuex数据持久化插件vuex-persist
02-14
更多文章>
Theme by Vdoing | Copyright © 2020-2023 Mrcdh | 苏ICP备2020058908号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×