文件上传input type=“file”的accept接收的各种文件类型总结

前言

        前端选择文件时,都会使用 input 框设定 type="file" 来选择文件,默认情况下可以选择所有类型的文件,有时候需要限定选择的文件类型,这时候就用到了 accept 属性。

        ps:accept 属性仅适用于 <input type="file"/>

accept 各种类型

文件类型accept 属性值(多个值之间以逗号隔开)
.3gppaudio/3gpp, video/3gpp
.ac3audio/ac3
.asfallpication/vnd.ms-asf
.auaudio/basic
.csstext/css
.csvtext/csv
.docapplication/msword
.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document
.dotapplication/msword
.dotxapplication/vnd.openxmlformats-officedocument.wordprocessingml.template
.docmapplication/vnd.ms-word.document.macroEnabled.12
.dotmapplication/vnd.ms-word.template.macroEnabled.12
.dtdapplication/xml-dtd
.dwgimage/vnd.dwg
.dxfimage/vnd.dxf
.gifimage/gif
.htmtext/html
.htmltext/html
.jp2image/jp2
.jpeimage/jpeg
.jpegimage/jpeg
.jpgimage/jpeg
.jstext/javascript, application/javascript
.jsonapplication/json
.mp2audio/mpeg, video/mpeg
.mp3audio/mpeg
.mp4audio/mp4, video/mp4
.mpegvideo/mpeg
.mpgvideo/mpeg
.mppapplication/vnd.ms-project
.oggapplication/ogg, audio/ogg
.pdfapplication/pdf
.pngimage/png
.potapplication/vnd.ms-powerpoint
.potmapplication/vnd.ms-powerpoint.presentation.macroEnabled.12
.potxapplication/vnd.openxmlformats-officedocument.presentationml.template
.ppsapplication/vnd.ms-powerpoint
.ppsmapplication/vnd.ms-powerpoint.slideshow.macroEnabled.12
.ppsxapplication/vnd.openxmlformats-officedocument.presentationml.slideshow
.pptapplication/vnd.ms-powerpoint
.pptmapplication/vnd.ms-powerpoint.presentation.macroEnabled.12
.pptxapplication/vnd.openxmlformats-officedocument.presentationml.presentation
.ppaapplication/vnd.ms-powerpoint
.ppamapplication/vnd.ms-powerpoint.addin.macroEnabled.12
.rtfapplication/rtf, text/rtf
.svfimage/vnd.svf
.tifimage/tiff
.tiffimage/tiff
.txttext/plain
.wdbapplication/vnd.ms-works
.wpsapplication/vnd.ms-works
.xhtmlapplication/xhtml+xml
.xlcapplication/vnd.ms-excel
.xlmapplication/vnd.ms-excel
.xlaapplication/vnd.ms-excel
.xlamapplication/vnd.ms-excel.addin.macroEnabled.12
.xlsapplication/vnd.ms-excel
.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xlsmapplication/vnd.ms-excel.sheet.macroEnabled.12
.xlsbapplication/vnd.ms-excel.sheet.binary.macroEnabled.12
.xltapplication/vnd.ms-excel
.xltxapplication/vnd.openxmlformats-officedocument.spreadsheetml.template
.xltmapplication/vnd.ms-excel.template.macroEnabled.12
.xlwapplication/vnd.ms-excel
.xmltext/xml, application/xml
.zipapplication/zipapplication/x-zip-compressed

        当然,也可以使用 * 指定所有的文件类型,比如:“*” 指定所有文件类型;“image/*” 指定所有图片类型;“audio/*” 或 “video/*” 指定所有视频类型。

用法

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

参考:https://blog.csdn.net/millia/article/details/134200983

  • 25
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 这是HTML语言中的一段代码,其中的属性含义如下: - `type="file"`:定义该元素为文件上传的输入框。 - `id="dataFile"`:给该元素定义一个ID,以便在JavaScript中进行操作。 - `name="datafile"`:定义该元素的名称,方便在后台获取上传的文件。 - `accept=".csv"`:定义该元素可以接受的文件类型,这里是只允许上传.csv格式的文件。 - `onchange="inputData(this)"`:当用户选择了上传文件后,会调用名为`inputData`的JavaScript函数进行处理。`this`表示当前的元素对象。 ### 回答2: 在HTML语法中,type="file"是一个input元素的属性取值,表示该input元素是一个文件选择框,用户可以通过点击该元素来选择文件。id="dataFile"是给该input元素赋予一个唯一的标识符,通过该标识符可以在JavaScript中对该元素进行操作。name="datafile"是该input元素的名称,用于向服务器提交文件数据。accept=".csv"是用于限制用户选择的文件类型,只允许选择以.csv结尾的文件。onchange="inputData(this)"是一个JavaScript事件,当用户选择文件后,inputData()函数将被触发执行,可以在该函数中进行文件数据的处理或其他操作。总之,这些语法表示在HTML页面中创建一个文件选择框,并指定了相关属性和事件,用于实现文件上传和处理。 ### 回答3: type="file" id="dataFile" name="datafile" accept=".csv" onchange="inputData(this)" 这段语法是用来创建一个文件上传的输入框。 - `type="file"` 表示这是一个文件输入框,即允许用户选择文件进行上传。 - `id="dataFile"` 定义了该文件输入框的唯一标识符,可以用于后续的JavaScript处理或样式设置。 - `name="datafile"` 定义了上传文件时给文件命名的参数名称,以便在服务端接收时使用。 - `accept=".csv"` 是一个可选的属性,限制用户只能选择以.csv为扩展名的文件进行上传。这样可以在一定程度上保持上传文件的格式规范性。 - `onchange="inputData(this)"` 是一个事件处理函数,在文件选择变化时会调用该函数。参数`this`表示当前的文件输入框。 通过这个文件输入框,用户可以浏览本地文件系统,选择一个 CSV 格式的文件进行上传。一旦用户选择了文件,该文件的信息就会被传递给 JavaScript 函数 `inputData` 进行处理。这个函数可以实现对用户选择的文件进行一系列的操作,如读取文件内容、验证文件格式、上传文件等。这个语法主要使用在网页中,提供了方便的文件上传功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值