input accept属性限制文件上传格式

上传文件的类型;具体做法如下所示:

注意:accept属性可以限制上传格式,其有兼容性如下

《1》上传.csv格式的

<input text="file" accept=".csv" />

《2》上传.xls格式

<input text="file"  accept="application/vnd.ms-excel"/>

《3》上传.xslx格式

<input text="fiel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>

《4》上传.png/.jpg/etc格式

<input type="file" accept="text/plain" />

《5》上传图片格式

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

《6》上传.htm,.html格式

<input type="file" accept="text/html" />

《7》上传video(.avi, .mpg, .mpeg, .mp4)格式

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

《8》上传audio(.mp3, .wav, etc)格式

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

《9》上传.pdf格式

<input type="file" accept=".pdf" />

《10》如果限制两种文件格式,同时限制

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">

注意:以逗号分隔开

原文地址:https://www.cnblogs.com/mmzuo-798/p/9685994.html

时间: 2024-10-23 00:15:07

input accept属性限制文件上传格式的相关文章

h5 input file ajax实现文件上传

<input type="file" accept="image/*" height="0" class="file_input" id="file_input_ss_0" multiple>  文件域 遇到的几个BUG 已经解决 1 多选文件域,如果没有上传成功或已上传成功,再次点击文件域名选择图片时,会累积上次的文件. 例如 第一次上传1.jpg  第二次点击上传 2.jpg 第二次的上传结

input标签处理多文件上传

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Consolas; color: #2b9edb } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Consolas; color: #d76019 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Consolas; color: #2eafa9 } p.p4 { mar

input file美化,文件上传

此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用Jq提交表单 1.css <style> .a-upload { padding: 4px 4px 10px 10px; height: 25px; line-height: 20px; position: relative; cursor: pointer; color: #888; backgr

input实现多文件上传及图片预览

通过使用html的input标签可以实现文件上传比如 <input id="file" type="file" name="upload" multiple onchange="showch();"> 其中将type属性设为file. 添加multiple实现多文件上传入下图所示: 通过使用原生js或jQuery就可以获得文件名,文件路径,文件大小等属性 获得文件属性的js代码如下: <script type

html 文件上传框 input标签

文件上传框 有时候,需要用户上传自己的文件,文件上传框看上去和其它 文本域差不多,只是它还包含了一个浏览按钮.访问者可以通 过输入需要上传的文件的路径或者点击浏览按钮选择需要上传 的文件. 代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxlength=“100”> 属性解释: 属性解释: type=“file”定义文件上传框: name属性定义文件上传框的名称,要保

input file实现多选和限制文件上传类型

<!-- input file  accept 属性设置可上传文件的类型  multiple属性设置可多文件上传--> <!-- accept 并未真正的实现限制上传文件类型,只是在选文件的时候有限制, 如果选文件的时候手动修改上传文件的类型,还是可以上传其他文件的. 因此,要实现只上传accept属性指定的文件类型,还必修结合js来实现--> <input type="file" accept=".doc,.docx" multipl

HTML5 增强的文件上传域

在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.FileList对象和File对象 HTML5为type='file' 的<input/>元素增加了两个属性. accept:该属性控制允许上传的文件类型.该属性为一个或多个MIME类型字符串.多个MIME类型字符串之间应以都好分割. multiple:该属性设置是否允许选择多个文件 JavaScript

Spring_SpringMVC处理文件上传

世上最快乐的事,莫过于为理想而奋斗. -- 苏格拉底 1.multipart请求 一般表单提交所形成的请求结果时很简单的,就是以"&"符分割的多个name-value对,如:"firstName=Charles&lastName=Bob".对于典型的基于文本的表单提交,这种编码形式也足够满足要求,但是对于multipart请求中传送二进制数据,就显得力不从心. 对于multipart请求,对于multipart格式的二进制数据会将一个表单拆分为多个部

Java文件上传

本文转载自 文件上传与 Angular 最近项目需要使用 Angular,对于初学 Angular 的我只能硬着头皮上了,项目中有一个需求是文件上传,磕磕绊绊之下也实现了,将实现过程中学习到的一些知识记录下来以备将来查阅. 与表单数据编码相关的知识 通常,我们使用 HTML 的标签 <form> 来为用户输入创建一个表单,使用 <input type="file"> 作为文件上传的控件. 要将表单的数据发送给后台,不仅要通过指定 <form> 的属性