type="file" />浏览时只显示指定文件类型

accept属性列表

1.accept="application/msexcel"

2.accept="application/msword"

3.accept="application/pdf"

4.accept="application/poscript"

5.accept="application/rtf"

6.accept="application/x-zip-compressed"

7.accept="audio/basic"

8.accept="audio/x-aiff"

9.accept="audio/x-mpeg"

10.accept="audio/x-pn/realaudio"

11.accept="audio/x-waw"

12.accept="image/gif"

13.accept="image/jpeg"

14.accept="image/tiff"

15.accept="image/x-ms-bmp"

16.accept="image/x-photo-cd"

17.accept="image/x-png"

18.accept="image/x-portablebitmap"

19.accept="image/x-portable-greymap"

20.accept="image/x-portable-pixmap"

21.accept="image/x-rgb"

22.accept="text/html"

23.accept="text/plain"

24.accept="video/quicktime"

25.accept="video/x-mpeg2"

26.accept="video/x-msvideo"

这个就可以实现选择具体的数据类型,但是有兼容问题,我在测试的时候只有Opera,Chrome能用,火狐和IE都不兼容

好吧,就在这里测试一下吧:

我只想要word

在这里如果想支持多种类型的话,比如金山的office和microsoft的office的不同扩展名,这样的话可以在accept里面放置多个属性就可以了:

type="file" name="pic" id="pic" accept="image/gif,

image/jpeg"

/>

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

好的,测试一下:

我只想要gif、bmp

好吧,只要是图片我就要了

嗯,测试成功,用Opera,Chrome能用,因为accept也是html5的新特性,所以火狐和IE的支持就显得单薄了,这样还是让我们等待他们的接受把

测试了好久,发现gif和bmp一起的时候并不是能取得他们的并集,仔细观察以后是按写入顺序排列了一下他们的“文件选择类型”:

就像是下面的图片一样:

我们如果不定义input

file的格式的时候,那么文件类型的地方就是全部文件*.*,如果我们定义了自己的,那么文件类型就会和我们选中的一样,但是这时候我们如果想看别的文件的时候还是可以通过文件类型的下拉框,去选择自己额外喜欢的类型的,简单的说,它就是起到了一个简单的按照我们的主观意愿筛选的作用,同时我们如果不是选择的image/*而是好几个并列的话就会按照上面的情况分别得排列出来,比如图上的我input就是这个样子的:

type="file" name="pic" id="pic" accept="image/gif,

image/x-ms-bmp, image/bmp"

/>

html file 隐藏,input type=file /浏览时只显示指定文件类型(html5新特性)相关推荐

  1. php只显示指定文件类型_PHP 上传时的文件类型

    php上传常见文件类型对应的$_FILES["file"]["type"]. xls application/vnd.ms-excel xlsx applica ...

  2. input=file 浏览时只显示指定excel文件,筛选特定文件类型

    https://www.cnblogs.com/quitpoison/p/9765974.html

  3. 用ajax传值input file,获取 input type=file 标签的内容,并使用ajax进行请求到服务器...

    数据结构:栈 顺序表方法和单链表方法(python版) #!/usr/bin/env python # -*- coding:utf-8 -*- class StackUnderflow(ValueE ...

  4. HTML滑动条自动滑动,HTML5新特性——自定义滑动条(input[type=range])

    HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...

  5. 解决input[type=file]打开时慢、卡顿问题

    解决input[type=file]打开时慢.卡顿问题 参考文章: (1)解决input[type=file]打开时慢.卡顿问题 (2)https://www.cnblogs.com/zhouyang ...

  6. 使用input type=file 上传文件时需注意

    在asp.net的中使用<input type='file' />控件上传文件对文件的大小有限制,默认情况下大概在4m左右,如果上传再大的文件时就会出页面无法显示的错误. 修改web.co ...

  7. input type='file' 上传文件时显示文件名及上传进度

    https://blog.csdn.net/qq_36687640/article/details/78551217 1.input type='file' 上传文件时显示文件名及上传进度 <i ...

  8. android 拍 上传视频无法播放,【报Bug】input type=file时无法使用相机拍摄视频

    详细问题描述 需要上传视频,使用input type=file,在浏览器环境可以调起摄像头拍摄视频 ,在安卓app使用webview加载该页面时,没有拍摄视频选项. [内容] 重现步骤 [步骤] ht ...

  9. input type=file图片上传时,先预览

    <label><input type="file" id="upload"> </label> js $("#up ...

最新文章

  1. 【学神-RHEL7】1-4-1-Linux文件管理和恢复误删除的文件
  2. LED适用范围及寿命
  3. 将Quarkus应用程序部署到AWS Elastic Beanstalk
  4. repr方法字符串输出实例对象的值
  5. MFC/VC CxImage 简单配置与使用 (完整版)
  6. jmeter中控制器3个请求其中一个访问不到_性能测试干货丨盘点JMeter常见的逻辑控制器...
  7. Linux—Ubuntu14.0.5配置JAVA环境
  8. iOS 14.5广告跟踪功能使广告商在安卓支出增长21%
  9. Tyvj - 1305 单调队列优化dp
  10. 如何连接linux服务器
  11. 服务器安装配置lldp协议
  12. python求相关系数_python 求相关系数
  13. 如何实现thead固定不动,tbody出现垂直滚动条
  14. 共模信号和差模信号的区别和抑制
  15. 【VS2015】Win7 X64上面安装VS2015
  16. growup怎么读_欧路词典|英汉-汉英词典 grow up是什么意思_grow up的中文解释和发音_grow up的翻译_grow up怎么读...
  17. java 调用 CXF 报错 java.lang.NoSuchMethodError: javax.wsdl.xml.WSDLReader.readWSDL
  18. k型热电偶材料_什么是k型热电偶_k型热电偶的测量范围
  19. mp3怎么转换成m4r(iPhone铃声制作)
  20. 汇编idiv带符合除法指令。。。。

热门文章

  1. gatsby_将Gatsby默认启动程序转换为使用样式化组件
  2. u8薪资管理_用友U8习题集
  3. Python基础入门知识点——Python中的异常
  4. python爬虫之路--准备环境
  5. Invoke and BeginInvoke BeginInvoke和EndInvoke方法 (转)3
  6. 深度学习《CNN架构续篇 - BatchNorm》
  7. [深度学习-原理]浅谈Attention Model
  8. java 注册成功跳转,写了个注册页面填了注册信息后点注册按钮居然不跳转,为什么?...
  9. python安装wxpython库_wxPython:python 首选的 GUI 库
  10. leetcode —— 15. 三数之和