input type=file 文件类型限制属性 accept

最近开发移动端,上传图片处客户要求点击上传后,直接弹出相册和拍照功能。测试后发现加上文件类型限制即可,不过不同系统调用方式不同。

差异:苹果显示为文件和拍照,安卓为相册和拍照(想到的一种方法就是自定义调用)。不过这里是系统差异,我们暂时不管。

在上传文件的时候,需要限制指定的文件类型。

<input type="file" accept="image/*" />  

   accept表示可以上传文件类型,image表示图片,*表示所有支持的格式。

accept可以指定如下信息:

*.3gpp

audio/3gpp, video/3gpp

3GPP音频/视频

*.ac3

audio/ac3

AC3音频

*.asf

allpication/vnd.ms-asf

高级流媒体格式

*.au

audio/basic

AU音频

*.css

text/css

层叠样式表

*.csv

text/csv

逗号分隔值

*.doc

application/msword

MS Word文档

*.dot

application/msword

MS Word模板

*.dtd

application/xml-dtd

文档类型定义

*.dwg

image/vnd.dwg

AutoCAD绘图数据库

*.dxf

image/vnd.dxf

AutoCAD绘图交换格式

*.gif

image/gif

图形交换格式

*.htm

text/html

超文本标记语言

*.html

text/html

超文本标记语言

*.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对象表示法

*.mp2

audio/mpeg, video/mpeg

MPEG音频/视频流,第二层

*.mp3

audio/mpeg

MPEG音频/视频流,第三层

*.mp4

audio/mp4, video/mp4

MPEG-4音频/视频

*.mpeg

video/mpeg

MPEG视频流,第二层

*.mpg

video/mpeg

MPEG视频流,第二层

*.mpp

application/vnd.ms-project

MS项目项目

*.ogg

application/ogg, audio/ogg

Ogg Vorbis

*.pdf

application/pdf

便携式文档格式

*.png

image/png

便携式网络图形

*.pot

application/vnd.ms-powerpoint

MS PowerPoint模板

*.pps

application/vnd.ms-powerpoint

MS PowerPoint幻灯片

*.ppt

application/vnd.ms-powerpoint

MS PowerPoint演示文稿

*.rtf

application/rtf, text/rtf

文本格式

*.svf

image/vnd.svf

简单的矢量格式

*.tif

image/tiff

标记的图像格式文件

*.tiff

image/tiff

标记的图像格式文件

*.txt

text/plain

纯文本

*.wdb

application/vnd.ms-works

MS Works数据库

*.wps

application/vnd.ms-works

工程文本文档

*.xhtml

application/xhtml+xml

可扩展的超文本标记语言

*.xlc

application/vnd.ms-excel

MS Excel图表

*.xlm

application/vnd.ms-excel

MS Excel宏

*.xls

application/vnd.ms-excel

MS Excel电子表格

*.xlt

application/vnd.ms-excel

MS Excel模板

*.xlw

application/vnd.ms-excel

MS Excel工作区

*.xml

text/xml, application/xml

可扩展标记语言

*.zip

aplication/zip

压缩的档案

..

猜你喜欢

转载自570109268.iteye.com/blog/2406075