前端表单accept属性怎么用?

时间:2023-10-07 16:43:00 分类:建站知识 阅读:2364
摘要:在前端页面如“报名表单”需要上传文件的时候,得限制指定的文件类型,accept 属性只能与type="file"配合使用,它规定能够通过文件上传进行提交的文件类型。
前端表单accept属性怎么用?

在前端页面如“报名表单”需要上传文件的时候,得限制指定的文件类型,accept 属性只能与type="file"配合使用,它规定能够通过文件上传进行提交的文件类型。比如我只想上传pdf的格式:


【input type="file" name="file" id="file" accept='.pdf'/】(input标签<>改为【】了,使用时候自行替换)


接收多种格式,接受 GIF 和 JPEG 两种图像:


【input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /】(input标签<>改为【】了,使用时候自行替换)


如果不限制图像的格式,可以写为:accept=“image/*”这样的,当然除了这些限制的格式,还支持以下20多种格式:


accept可以指定如下信息:

如果不限制图像的格式,可以写为:accept="image/*"

另外多个参数用英文逗号,分隔,比如accept=".doc,.docx,.pdf"


*.3gpp   audio/3gpp, video/3gpp

*.ac3    audio/ac3

*.asf    allpication/vnd.ms-asf

*.au     audio/basic

*.css    text/css

*.csv    text/csv

*.doc    application/msword

*.dot    application/msword

*.dtd    application/xml-dtd

*.dwg    image/vnd.dwg

*.dxf    image/vnd.dxf

*.gif    image/gif

*.htm    text/html

*.html   text/html

*.jp2    image/jp2

*.jpe    image/jpeg

*.jpeg   image/jpeg

*.jpg    image/jpeg

*.js     text/javascript, application/javascript

*.json   application/json

*.mp2    audio/mpeg, video/mpeg

*.mp3    audio/mpeg

*.mp4    audio/mp4, video/mp4

*.mpeg   video/mpeg

*.mpg    video/mpeg

*.mpp    application/vnd.ms-project

*.ogg    application/ogg, audio/ogg

*.pdf    application/pdf

*.png    image/png

*.pot    application/vnd.ms-powerpoint

*.pps    application/vnd.ms-powerpoint

*.ppt    application/vnd.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

*.wps    application/vnd.ms-works

*.xhtml  application/xhtml+xml

*.xlc    application/vnd.ms-excel

*.xlm    application/vnd.ms-excel

*.xls    application/vnd.ms-excel

*.xlt    application/vnd.ms-excel

*.xlw    application/vnd.ms-excel

*.xml    text/xml, application/xml

*.zip    aplication/zip


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


.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


以上就是前端input上传文件时候的所有accept属性值了,可以根据项目需求自行限制!

声明:本文来自网友投稿,本站免一切责任,如有侵权,请联系小编删除。
链接:https://www.jin-you.com/news/1265.html

需要做网站还是小程序?

欢迎联系我们,我们可以提供企业网站建设、小程序开发、外贸独立站、商城建设等IT外包服务

您身边的【企业建站服务专家】

搜索千万次不如咨询1次

主营项目:各类网站建设,电商套图设计,小程序开发,外贸独立站建设等

立即咨询 158 155 17902
在线客服
嘿,我来帮您!