HTML5 input file,accept

简介: accept表示可以上传文件类型,image表示图片,*表示所有支持的格式。在上传文件的时候,需要限制指定的文件类型。

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

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

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


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


除了以上的类型外,2007后各文档如docx需配置的accept属性值如下:

Extension MIME Type

.xlsx   application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

.xltx   application/vnd.openxmlformats-officedocument.spreadsheetml.template

.potx   application/vnd.openxmlformats-officedocument.presentationml.template

.ppsx   application/vnd.openxmlformats-officedocument.presentationml.slideshow

.pptx   application/vnd.openxmlformats-officedocument.presentationml.presentation

.sldx   application/vnd.openxmlformats-officedocument.presentationml.slide

.docx   application/vnd.openxmlformats-officedocument.wordprocessingml.document

.dotx   application/vnd.openxmlformats-officedocument.wordprocessingml.template

.xlsm   application/vnd.ms-excel.addin.macroEnabled.12

.xlsb   application/vnd.ms-excel.sheet.binary.macroEnabled.12


目录
相关文章
|
25天前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型6
`&lt;input type=&quot;url&quot;&gt;` 用于需要输入 URL 的表单字段,浏览器会自动验证输入是否为有效网址
|
25天前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型5
HTML5 引入了多种新的输入类型,以增强用户体验和数据验证。`&lt;input type=&quot;tel&quot;&gt;` 用于输入电话号码;`&lt;input type=&quot;time&quot;&gt;` 允许用户选择时间(不带时区);`&lt;input type=&quot;url&quot;&gt;` 用于输入网址,支持自动验证。这些输入类型在不同浏览器中的支持情况有所不同,但大多数现代浏览器均能良好支持。例如,在 iPhone 的 Safari 浏览器中,使用 `url` 类型时,键盘会特别显示 `.com` 按钮以方便输入。
|
26天前
|
移动开发 HTML5
HTML5 新的 Input 类型2
`&lt;input&gt;` 标签提供多种类型以满足不同需求:`datetime` 类型用于选择 UTC 时间的日期和时间;`datetime-local` 类型用于选择不带时区的日期和时间;`email` 类型则确保输入的是有效的电子邮件地址,适用于需要收集用户邮箱信息的场景。
|
26天前
|
移动开发 HTML5
HTML5 新的 Input 类型3
`&lt;input type=&quot;month&quot;&gt;` 允许用户选择一个月份,适用于需要指定月份和年的场景。示例:生日 (月和年)。 `&lt;input type=&quot;number&quot;&gt;` 用于需要数值输入的场合,可设置数值范围等限制。示例:数量 (1 到 5 之间)。支持 `disabled`, `max`, `min` 等属性以增强功能。
|
26天前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型1
HTML5引入了多种新的输入类型,如color、date、email等,增强了表单的输入控制与验证功能。尽管并非所有浏览器都完全支持,但这些新类型仍可在主流浏览器中使用,不支持时会退化为普通文本输入。例如,`&lt;input type=&quot;color&quot;&gt;`允许用户通过颜色选择器选取颜色,而`&lt;input type=&quot;date&quot;&gt;`则提供了一个日期选择器来方便用户选择日期。
|
25天前
|
移动开发 HTML5
HTML5 新的 Input 类型4
`range` 类型的输入域用于需要在一定范围内选择数值的情况,通常以滑动条形式展示。
|
2月前
|
移动开发 前端开发 JavaScript
HTML5 新的 Input可以有哪些好玩的应用
HTML5的新输入类型为应用带来了多种创新和互动功能,显著提升了用户体验和界面趣味性。例如,颜色选择器可动态改变网站主题色;滑块控制适用于音量或亮度调节;日期和时间输入便于预约系统的设计;互动式表单结合多种输入类型实现高效的数据收集;猜数字游戏增加用户参与度;实时搜索建议优化网站搜索功能;图像预览功能让用户上传图片前预览效果;密码可见性切换按钮提升表单的可用性;结合用户位置的电话号码输入则能提供附近服务信息。这些应用场景不仅使网站更具吸引力,还增强了用户的互动体验。
|
2月前
|
移动开发 数据安全/隐私保护 UED
HTML5 新的 Input 类型详解
HTML5引入了多种新输入类型,显著提升了表单的用户体验和可用性。这些类型包括普通文本、搜索、电子邮件、网址、电话号码、密码、数字、范围选择、日期、时间、颜色选择等,每个类型都有特定用途和优化功能。例如,`email` 类型可自动验证邮件格式,`number` 类型提供增减按钮,而 `date` 类型则内置日期选择器。这些新类型不仅简化了用户操作,还增强了开发者对表单验证和数据交互的控制能力。
|
6月前
|
缓存
html input 如何设置禁止缓存历史记录
html input 如何设置禁止缓存历史记录
175 0
|
7月前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
76 0