文件上传input type=“file“之accept接受的类型汇总

于 2023-11-03 13:30:27 发布
阅读量2k 收藏 4
点赞数
分类专栏： Millia's work 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/millia/article/details/134200983
版权

 <input>标签

规定了用户可以在其中输入数据的输入字段。 <input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。 输入字段可通过多种方式改变，取决于 type 属性。

<input> type 属性

type 属性规定要显示的 <input> 元素的类型。

<input> accept 属性

accept 属性规定了可通过文件上传提交的服务器接受的文件类型。

注意：accept 属性仅适用于 <input type="file">

提示：请不要将该属性作为您的验证工具。应该在服务器上对文件上传进行验证。

<input type="file" @change="getVod($event)" accept="audio/mp4, video/mp4">

类型：

.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
米柆
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端文件上传input=file,accept=“video/*“的一些属性（苹果，安卓）
qq_41521625的博客
04-23 2279
移动端一些属性
vue中使用input[type=”file”]实现文件上传功能
12-29
注意:input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚...
html ＜input type=file＞上传文件时，accept属性值汇总，支持文件格式，限制文件格式，限制上传图片的格式
PrimaryColor
01-14 1万+
一、示例标签1： <input type="file" accept="image/*" /> accept属性说明： image表示图片，*表示支持所有格式的图片文件。 二、示例标签2： <inputtype="file"accept="audio/mp4,video/mp4" class="uploadVideo"/> 多种格式，以逗号分隔。 前缀说明： text：文本文件。如格式：txt、csv、css、html，能直接使用记事本打开的......
关于input file 的 accept 属性
wing
06-01 4643
在上传文件的时候，需要限制指定的文件类型，accept这个属性，只在FF和chrome中有效。那么accept能限制哪些文件呢？见下表。扩展名 MIME 描述*.3gpp     audio/3gpp, video/3gpp     3GPP Audio/Video*.ac3     audio/ac3     AC3 Audio*.asf     allpication/vnd.ms-asf  ...
<input type='file'> accept属性
文学超的博客
06-25 2万+
input标签是在前台开发中经常使用的，总结下其accept属性，即允许上传的文件类型。 input标签内置了很多允许上传的文件类型，只需要对应配置即可。 input type="file" accept="application/msword" > accept列表 1.accept="application/msexcel"2.accept="application/msword"3.
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 如果不限制上传图片的格式，只限...
input file accept，上传文件、下载文件类型限制格式 ；常用MIME类型列表，支持 apk,exe,.woff,.ipa
青颜的天空的博客
06-02 4334
常用MIME 文件拓展名 MIME类型 .docx application/vnd.openxmlformats-officedocument.wordprocessingml.document .xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xltx application/vnd.openxmlformats-officedocument.spreadsheetml.template
input type=file accept中文件格式限制
u010227042的博客
12-17 532
accept="application/msexcel,application/msword,application/pdf" <input type="file" accept="image/*" /> accept表示可以上传文件类型，image表示图片，*表示所有支持的格式。 accept可以指定如下信息： *.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video ..
input type=file 调取手机照相机和选择照片上传
12-17
为了启用照相机功能，我们需要在 `input` 元素上添加 `accept` 属性，指定允许选择的文件类型。例如，如果我们只想让用户选择图片，可以这样写： ```html <input type="file" accept="image/*" capture> ``` `...
HTML中文件上传时使用的input type=”file”元素的样式自定义
12-14
在HTML中，文件上传功能通常使用`<input type="file">`元素来实现。这个元素在不同的浏览器下，默认样式会有差异，通常是简单的文本输入框样式，可能与网站的整体设计风格不匹配。为了满足用户界面的需求和提升用户...
HTML input type=file文件选择表单元素.docx
11-22
accept 属性可以用来指定浏览器接受的文件类型，也就是当我们打开系统的挑选文件弹框时，默认界面中展现的文件类型。例如：accept="image/jpeg"，则界面中惟独显示jpg文件。 HTML input type=file 文件选择表单元素...
定义input type=file 样式的方法
12-14
`<input type="file">`被定位在模拟的文本框和按钮之上，通过CSS设置`opacity: 0`或`filter: alpha(opacity: 0)`使其不可见，同时保留其功能。 对应的CSS样式可能如下： ```css .file-box { position: relative; ...
input type=“file“的accept总结
qq_42882723的博客
07-21 531
后缀 accept .xml text/xml， application/xml Extensible Markup Language .js text/javascript， application/javascript JavaScript .json application/json JavaScript Object Notation .pdf application/pdf Portable Document Format .rtf application...
input accept属性筛选文件类型，及input file的选择的文件清空
weixin_40030173的博客
06-19 2440
一、accept属性 筛选文件类型 设置支持 .doc / .docx / .xls / .xlsx / .pdf 格式: <input type="file" accept=".doc,.docx,.xls,.xlsx,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" > 如果需要支持 .png 等，则在 accept 添加上既可，都逗号分隔。
input的file类型的accept属性的值
u013379933的博客
08-12 4万+
属性值 值 描述 audio/* 接受所有的声音文件。 video/* 接受所有的视频文件。 image/* 接受所有的图像文件。 MIME_type 一个有效的 MIME 类型，不带参数。请参阅 IANA MIME 类型，获得标准 MIME 类型的完整列表。         在上传文件的时候，需要限制指定的文件类型，accept这个属性...
上传文件时文件格式限制
weixin_43466627的博客
05-26 1918
< input type="file">的accept属性值详解accept可以限制文件的上传类型，比如只上传图片文件、视频文件、音频文件……如下详细类型限制如下所示： accept可以限制文件的上传类型，比如只上传图片文件、视频文件、音频文件……如下 1.audio/* 　接受所有的声音文件。 2.video/* 　 接受所有的视频文件。 3.image/* 　接受所有的图像文件。 详细类型限制如下所示： 1　*.3gpp audio/3gpp, video/3gpp 3GPP A
Html+CSS input type=file 文件类型限制属性 accept (HTML 5)
迎难而上
03-31 1万+
网页上添加一个input file HTML控件： 1 input id="File1" type="file" /> 　　默认是这样的，所有文件类型都会显示出来，如果想限制它只显示我们设定的文件类型呢，比如“word“,”excel“,”pdf“文件　 　　解决办法是可以给它添加一个acc
文件上传中：accept 限制文件类型格式查询
光头迪迦
11-18 2526
懒得写了，，哈哈，，直接一张图简明了： 关于input的type=file上传文件accept中限制文件类型pdf、doc、docx、 jpg、 png、xls 、xlsx等格式如下哈
＜video＞标签及属性说明
热门推荐
米拉
06-30 5万+
实例 HTML <video> 标签 一段简单的 HTML5 视频： <video src="video.mp4" controls="controls"> 您的浏览器不支持 video 标签。 </video> 属性 性 值 描述 autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 height
jQuery动态添加input type=file文件上传域并配合ajax上传文件
最新发布
05-26
可以使用以下代码实现 jQuery 动态添加 input type=file 文件上传域并配合 ajax 上传文件。 HTML 代码： ```html <div id="file-list"></div> <button id="add-file">添加文件</button> ``` JavaScript 代码： ```javascript $(function() { var fileList = $('#file-list'); var addButton = $('#add-file'); addButton.on('click', function() { var fileInput = $('<input type="file" name="file">'); var removeButton = $('<button>删除</button>'); var listItem = $('<div></div>').append(fileInput).append(removeButton); fileList.append(listItem); removeButton.on('click', function() { listItem.remove(); }); fileInput.on('change', function() { var file = fileInput[0].files[0]; if (file) { var formData = new FormData(); formData.append('file', file); $.ajax({ url: '/upload', type: 'POST', data: formData, processData: false, contentType: false, success: function(data) { console.log('上传成功'); } }); } }); }); }); ``` 具体实现步骤如下： 1. 创建一个包含文件列表的容器和添加文件按钮。 2. 给添加文件按钮绑定一个点击事件，动态创建一个 input type=file 文件上传域和删除按钮，将它们添加到文件列表容器中。 3. 给删除按钮绑定一个点击事件，当点击时将该文件上传域从文件列表容器中删除。 4. 给文件上传域绑定一个 change 事件，当选择了文件时，创建一个 FormData 对象，将选中的文件添加到其中，然后通过 ajax 发送到服务器。 5. 在 ajax 的 success 回调函数中处理上传成功后的逻辑。 注意，要设置 processData 和 contentType 为 false，这样 jQuery 就会将 FormData 对象中的数据直接发送到服务器，而不是将其转换为字符串发送。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值