浏览时只显示指定文件类型

<

input

type

="file"

accept

="application/msword"

><

br

><

br

>

accept属性列表

<

br

>

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里面放置多个属性就可以了:

accept="image/gif, image/jpeg" />

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

好的,测试一下:

我只想要gif、bmp

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

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

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

就像是下面的图片一样:

/>浏览时只显示指定文件类型(html5新特性)" style="border:0px;list-style:none;" width="0" height="0">

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

accept="image/gif, image/x-ms-bmp, image/bmp" />

html5怎么设置年月日选择框,HTML5文件选择框(各种类型)相关推荐

  1. python利用pyside2创建文件夹选择框,文件选择框(无小窗口)

    python利用pyside2创建文件夹选择框,文件选择框(无小窗口) 文件夹选择框 文件选择框 文件多选框 之前利用win32ui创建文件选择窗口非常好用,但是想使用文件夹选择窗口发现行不通.利用t ...

  2. 2016.2.17文件夹选择框及文件选择框

    string fpth = ""; OpenFileDialog openFileDialog = new OpenFileDialog(); openFileDialog.Tit ...

  3. html5怎么设置逐帧动画,HTML5 - 逐帧动画不起作用

    我有这个帧动画,其中每个帧在每1/30s被调用.HTML5 - 逐帧动画不起作用 画布根本没有被正确清除.为什么? 下面是代码: var canvas; var stage; var screen_w ...

  4. html5如何设置视频为静音,html5中设置或返回音频/视频是否应该被静音的属性muted-...

    实例 关闭视频的声音:myVid=document.getElementById("video1"); myVid.muted=true; 定义和用法 muted 属性设置或返回音 ...

  5. jsp页面转为html5,eclipse 设置jsp页面为HTML5

    在ubuntu上安装nodejs[开启实时web时代] 作为一名菜鸟,竟然在centos桌面上连输入命令行的地方都找不到,是在是对不起开山祖师,最后苍天不负苦心人,在ubuntu上找见了 [安装过程参 ...

  6. 右键txt打开html,文件解压不了怎么办 右键菜单中选择解压文件

    我的电脑不能解压文件怎么办 首先打开自己的文件夹或者文档,选择需要压缩的文件. 选中文件夹,右击选择压缩到"当前文档"选项. 电脑显示不了压缩文件怎么办?? 我自己重做过一次系统` ...

  7. HTML5文件选择框(各种类型)

    <input type="file" />浏览时只显示指定文件类型 <input type="file" accept="appli ...

  8. html5怎么设置勾选,word文档怎么设置输入勾选框

    我们做报告或者调查问卷时候最常用的应该就是勾选框了吧,那么怎么输入呢?下面学习啦小编就为大家介绍一下,一起来看看吧! word文档输入勾选框的方法 输入勾选框步骤1:首先我个人比较喜欢通过某些输入法软 ...

  9. html5 多文件选择

    引用:http://www.linuxidc.com/Linux/2012-05/59907.htm HTML5 里面对于文件上传有了极大的增强,曾几何时,当我们需要实现一个多文件双传功能,必须一次指 ...

  10. 兼容input 文件选择_「HTML5」FileAPI 文件操作实战

    本文来自<FileAPI 文件操作实战> 其他系列放在了Github,欢迎交流和Star 介绍 HTML5 为我们提供了 File API 相关规范.主要涉及 File 接口 和 File ...

最新文章

  1. 逆战服务器在哪个文件夹,逆战的背景音乐文件夹放在哪?别说在服务器上面!...
  2. HttpClient之GET请求
  3. 前端分页php,PHP分页类 – 前端开发,JQUERY特效,全栈开发,vue开发
  4. python matplotlib.pyplot() plt() 如何限制坐标的上下限?plt.xlim() plt.ylim()
  5. Navicat——MySQL之delimiter默认设置问题
  6. 九九乘法表-九九乘法表数据输出
  7. 为什么需要MapReduce?
  8. 50+企业数字化转型、管理的方法论,这本书到底有什么干货?
  9. Spotlights
  10. 完全卸载惠普打印机驱动程序方法搜集(未验证)
  11. Python 分词 第三方模块
  12. ppt计算机实验报告册,PPT实验报告模板
  13. 【笔记】EFCore SQLite 拼音汉字互换
  14. 求内切圆半径的c语言编程,数学内切圆半径公式
  15. [ProblemSolving]教育网下载速度慢,如何解决?
  16. 目前计算机已经发展到哪个阶段,目前电子计算机处于哪个阶段?计算机发展的四个阶段...
  17. [翻译]X窗口管理器的原理剖析(一)
  18. 滤波器:使用Filter solutions设计椭圆函数LC高通滤波器
  19. 最好的编程语言是怎样的?
  20. HDLM命令dlnkmgr详解之三__view

热门文章

  1. 【愚公系列】2022年02月 攻防世界-进阶题-MISC-86(picture2)
  2. Android截图命令screencap
  3. 在win11和win10的edge浏览器运行flash网址设置详解
  4. 华为交换机重置Console口密码
  5. 《海洋湍流导论》-Thorpe-2007读书笔记-第一章
  6. 信息系统项目管理师必背核心考点(四十一)风险管理计划
  7. 利用jszip压缩下载多文件
  8. 《遥感原理与应用》总结—遥感平台
  9. mac 版 idea 破解
  10. IDEA 2020下载与安装