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

最新推荐文章于 2025-06-15 23:59:29 发布
最新推荐文章于 2025-06-15 23:59:29 发布
阅读量3.1k 收藏 22
点赞数 25
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hyk521/article/details/140706899

前言

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

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

accept 各种类型

文件类型 accept 属性值（多个值之间以逗号隔开）
.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
.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
.dot application/msword
.dotx application/vnd.openxmlformats-officedocument.wordprocessingml.template
最低0.47元/天 解锁文章

200万优质内容无限畅学
移动端文件上传input=file,accept=“video/*“的一些属性（苹果，安卓）
qq_41521625的博客
04-23 4168
移动端一些属性
input file accept指定文件类型 xls、xlsx、ppt、pptx、doc、docx、pdf、csv、图片、html
Missying55的博客
01-28 1万+
.xls <input type="file" accept="application/vnd.ms-excel" /> .xlsx <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /> .ppt <input type="file" accept="application/vnd.ms-powerpoint" /> .pptx
＜input type=“file“＞的 accept 属性如何精确过滤 HEIC/WebP 等现代图片格式？
最新发布
前端大白话
06-15 1240
当你满心欢喜地开发一个图片上传功能，想象着用户上传美美的照片，却发现有人上传了莫名其妙的文件，或者是老旧格式拖慢系统，心情是不是瞬间像被浇了盆冷水？在前端开发里，`<input type="file">` 元素是实现文件上传的常用组件，但如果不加以限制，用户可能会上传各种不符合要求的文件，尤其是在处理图片上传时，面对HEIC、WebP等现代图片格式，如何精准过滤，让上传“规规矩矩”，成了不少开发者头疼的问题。别慌！`<input type="file">` 的 `accept` 属性就是解决这一难题的“布洛
http post上传文件与表格 ContentType = multipart/form-data
03-10
http post方式上传文件与表格，ContentType = multipart/form-data
常用MIME类型
qq_40131635的博客
09-23 651
后缀名 MIME名称 *.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 a.
文件上传之Content-Type
2302_80316906的博客
09-30 1185
HTTP协议规定了上传资源的时候在Header中加上一项文件的MIMETYPE，来识别文件类型，这个动作是由浏览器完成的，服务端可以检查此类型不过这仍然是不安全的,因为HTTP header可以被发出者或者中间人任意的修改。使用各种各样的工具（如burpsuite）强行篡改Header就可以，将Content-Type: application/php改为其他web程序允许的类型。
文件上传下载 Content-type 设置整理
热门推荐
spe294096580的专栏
08-05 3万+
一、Content-type基本概念 HTTP协议提供了Content-Type实体首部字段来描述报文实体的媒体格式，说明请求或返回的消息是用什么格式进行编码的，在request header和response header里都有存在。 用来向服务器或者浏览器说明传输的文件格式，以便服务器和浏览器按照正确的格式进行解析。在最初的的http post请求只支持application/x-www-form-urlencoded,参数是通过浏览器的url进行传递，但此种方法不支持文件上传，所以后...
HTTP Content-Type (MIME) el-upload文件、图片上传 | 文件改名 | 大文件 | 文件下载
海胆的博客
03-09 2012
MIME 为数据格式标签；最初 MIME 是用于电子邮件系统的，后来 HTTP 也采用了这一方案。在HTTP协议消息头中，使用来表示请求和响应中的媒体类型信息。
Content-Type: multipart/form-data； 上传文件
weixin_49115633的博客
01-13 8916
一、postman 模拟Content-Type: multipart/form-data请求头携带Content-Type: multipart/form-data;可以用来上传文件。当然，你也可以不上传文件，上传普通键值对。如下图，使用Postman 模拟提交数据。
通过 accept 限制上传文件类型
shrfgbfg的博客
01-17 1332
在日常工作中，文件上传是一个很常见的功能。在某些情况下，我们希望能限制文件上传的类型，比如限制只能上传 PNG 格式的图片。针对这个问题，我们会想到通过input元素的accept属性来限制上传的文件类型：这种方案虽然可以满足大多数场景，但如果用户把 JPEG 格式的图片后缀名更改为.png的话，就可以成功突破这个限制。因为通过并不能识别出正确的文件类型。我们可以通过读取文件的二进制数据来识别正确的文件类型。
不同的content-type请求头传参数方式，elementui上传文件
JHLIN的博客
07-09 5508
在这里插入代码片1、上传文件用到Content-Type：multipart/form-data1、默认的Content-Type：application/json二、elementui自定义上传文件
struts2 文件上传中 ContentType对应表
05-14
struts2 文件上传中 ContentType对应表
axios文件上传和 Content-Type类型介绍
小菜吉的博客
07-06 2040
content-type，B端发给S端的数据类型描述 响应头中的content-type，就是 S端发给B端的数据类型描述。FormData是XMLHttpRequest Level2提供的一个接口对象， 提供了一种表单数据的键值对的构造方法，即告诉服务器端，我给你传的数据是某种类型的。第3种类型：序列化后的 JSON 字符串，最常用，特别适合 RESTful 的接口。使用input设置type=filte来接受上传的文件，通过change事件的event对象获取上传的文件对象。
html ＜input type=file＞上传文件时，accept属性值汇总，支持文件格式，限制文件格式，限制上传图片的格式
PrimaryColor
01-14 2万+
一、示例标签1： <input type="file" accept="image/*" /> accept属性说明： image表示图片，*表示支持所有格式的图片文件。 二、示例标签2： <inputtype="file"accept="audio/mp4,video/mp4" class="uploadVideo"/> 多种格式，以逗号分隔。 前缀说明： text：文本文件。如格式：txt、csv、css、html，能直接使用记事本打开的......
input type=file accept中可以限制的文件类型
文进的专栏
11-11 3232
在上传文件的时候，需要限制指定的文件类型。             accept表示可以上传文件类型，image表示图片，*表示所有支持的格式。 ============================================================================= accept可以指定如下信息： *.3gpp
input的type=file上传文件accept中限制文件类型pdf、doc、docx、 jpg、 png、xls 、xlsx等格式
盏茶作酒的博客
08-12 2万+
（IE9及以下不支持下面这些功能，其它浏览器最新版本均已支持。） 1、允许上传文件数量 1. 允许选择多个文件：<input type="file" multiple> 2. 只允许上传一个文件：<input type="file" single> 2、上传指定的文件格式 如指定默认格式为gif、png： <input type="file" accept="image/gif,image/png" /> 1 如果不限制上传图片的格式，只限...
怎么修改服务器上文件格式,如何上传文件及content-type的设置
weixin_28878185的博客
07-31 5221
前言在使用 fetch / axios 时常常会涉及到文件上传，以及其他请求，其中包括一些 content-type ，被这些不同类型到 content-type 搞得头大，到底什么时候该用怎么样的类型呢，本文将会梳理这些问题。实例分析，如何上传一张图片表单提交方式表单用来收集用户提交的数据，发送到服务器。下面代码中包含：文件选择框(获取本地文件)，提交按钮(提交表单控件)。复制代码用户点击“提交...
文件上传限制类型参考
shengjon的博客
03-16 1671
【代码】文件上传限制类型参考。 在上传文件过程中，设计需求上这边总是需要对上传文件进行限制和判断，避免用户的盲操作，导致上传文件类型不对后，无法得到正确的信息，造成不好的体验影响，所以在页面上我们需要对文件类型做判断。
inputfile（bootstrap）实现文件上传保存本地路径
驰骋翱翔
03-16 1万+
关于文件上传，bootstrap做了很好的封装，通过引用File input插件就能实现很好的上传。下面讲解java语言通过mvc调用bootstrap的实现过程： 先看一下效果图：                                    可以将文件直接拖拽，或者点击文件选择要上传文件。                                    有兴
<form action=""> <input type="text">账户<br> <input type="password">密码 性别: <input type="radio" name="sex">男 <input type="radio" name="sex" checked="checked">女 <br> 爱好: <input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> <br> 打游戏 <input type="button" value="我是个按钮"> <input type="button" value="我是个按钮" onclick="alert('hello')"> <input type="text" name="username"> <input type="submit" value="提交"> <br> <input type="text" name="username"> <input type="submit" value="提交"> <input type="reset" value="清空"> <br> <input type="file">选择文件 <br> <select> <option>北京</option> <option selected="selected">上海</option> </select> <br> <select> <option>--请选择年份--</option> <option>1991</option> <option>1992</option> <option>1993</option> <option>1994</option> <option>199其中
04-26
### HTML表单元素及其用法 HTML 表单是一种用于收集用户输入的重要工具，它由 `<form>` 标签定义，并包含多种类型的表单元素。这些元素可以用来捕获用户的文本、选择项以及其他形式的输入。 #### 1. 表单的基本结构 表单的基本结构是由 `<form>` 标签包裹的一组表单元素组成。`<form>` 标签有两个重要的属性： - `action`: 定义表单数据提交到哪个 URL 地址[^2]。 - `method`: 指定提交数据使用的 HTTP 请求方法（通常是 `"GET"` 或 `"POST"`）[^2]。 示例代码如下： ```html <form action="/submit-form" method="post"> <!-- 表单元素 --> </form> ``` --- #### 2. 常见的表单元素及用法 ##### （1）文本输入框 (`<input type="text">`) 用于接收用户输入的纯文本内容。可以通过 `name` 和 `id` 属性对其进行标识和关联。 示例代码： ```html <label for="username">用户名：</label> <input type="text" id="username" name="username" required> ``` 说明：`required` 属性表示该字段不能为空[^4]。 --- ##### （2）密码输入框 (`<input type="password">`) 类似于文本框，但它会隐藏用户输入的内容。 示例代码： ```html <label for="pwd">密码：</label> <input type="password" id="pwd" name="password" required> ``` --- ##### （3）单选按钮 (`<input type="radio">`) 一组具有相同 `name` 属性的单选按钮中，每次只能选择其中一个。 示例代码： ```html <label><input type="radio" name="gender" value="male" checked> 男 </label> <label><input type="radio" name="gender" value="female"> 女 </label> ``` 注意：`checked` 属性可以让某个选项默认被选中[^4]。 --- ##### （4）复选框 (`<input type="checkbox">`) 允许多个选项同时被选中。 示例代码： ```html <label><input type="checkbox" name="hobby" value="reading"> 阅读 </label> <label><input type="checkbox" name="hobby" value="sports"> 运动 </label> ``` --- ##### （5）下拉菜单 (`<select>` 和 `<option>`) 用于创建一个可供用户选择的下拉列表。 示例代码： ```html <select name="city" id="city"> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> <option value="guangzhou">广州</option> </select> ``` 说明：`selected` 属性可以使某一项成为默认选项[^3]。 --- ##### （6）文件上传 (`<input type="file">`) 允许用户选择并上传文件。通常配合服务器端脚本处理文件存储逻辑。 示例代码： ```html <input type="file" name="profile_picture" accept="image/*"> ``` 说明：`accept` 属性限定可接受的文件类型[^3]。 --- ##### （7）提交按钮 (`<input type="submit">`) 和重置按钮 (`<input type="reset">`) - 提交按钮用于将表单数据发送至目标地址。 - 重置按钮则清空当前填写的所有表单项。 示例代码： ```html <input type="submit" value="提交"> <input type="reset" value="重置"> ``` --- #### 3. 其他常用属性 除了基本的表单元素外，还有一些常见的属性可用于进一步控制行为： | **属性名** | **作用** | |------------|----------| | `disabled` | 禁用特定表单元素，使其不可编辑或点击。 | | `readonly` | 设置文本框为只读状态，不允许修改其内容[^3]。 | | `maxlength` | 限制输入框内的最大字符数量。 | 示例代码： ```html <input type="text" name="example" maxlength="10" readonly> ``` --- #### 4. 使用 `<label>` 提高可访问性 为了提升用户体验和无障碍设计，建议始终为每个表单控件添加对应的 `<label>` 标签。通过 `for` 属性将其与相应的输入框绑定在一起。这样即使点击标签本身也能激活对应输入框[^4]。 示例代码： ```html <label for="email">邮箱地址：</label> <input type="email" id="email" name="email"> ``` --- ### 总结 以上介绍了 HTML 表单的主要构成部分以及常见表单元素的具体用法。合理运用这些功能可以帮助开发者构建更加灵活且友好的用户界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值