摘自:http://blog.csdn.net/jyy_12/article/details/9851349

(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持。)

1、允许上传文件数量

允许选择多个文件:<input type="file" multiple>

只允许上传一个文件:<input  type="file" single>

2、上传指定的文件格式

<input type="file" accept="image/gif,image/png" />

这里的上传格式仅指打开上传弹窗选择文件时默认的文件格式,可手动修改成其它文件格式。

如果不限制上传图片的格式可写成:accept="image/*"

其它格式参考如下:

*.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video
*.ac3 audio/ac3 AC3 Audio
*.asf allpication/vnd.ms-asf Advanced Streaming Format
*.au audio/basic AU Audio
*.css text/css Cascading Style Sheets
*.csv text/csv Comma Separated Values
*.doc application/msword MS Word Document
*.dot application/msword MS Word Template
*.dtd application/xml-dtd Document Type Definition
*.dwg image/vnd.dwg AutoCAD Drawing Database
*.dxf image/vnd.dxf AutoCAD Drawing Interchange Format
*.gif image/gif Graphic Interchange Format
*.htm text/html HyperText Markup Language
*.html text/html HyperText Markup Language
*.jp2 image/jp2 JPEG-2000
*.jpe image/jpeg JPEG
*.jpeg image/jpeg JPEG
*.jpg image/jpeg JPEG
*.js text/javascript, application/javascript JavaScript
*.json application/json JavaScript Object Notation
*.mp2 audio/mpeg, video/mpeg MPEG Audio/Video Stream, Layer II
*.mp3 audio/mpeg MPEG Audio Stream, Layer III
*.mp4 audio/mp4, video/mp4 MPEG-4 Audio/Video
*.mpeg video/mpeg MPEG Video Stream, Layer II
*.mpg video/mpeg MPEG Video Stream, Layer II
*.mpp application/vnd.ms-project MS Project Project
*.ogg application/ogg, audio/ogg Ogg Vorbis
*.pdf application/pdf Portable Document Format
*.png image/png Portable Network Graphics
*.pot application/vnd.ms-powerpoint MS PowerPoint Template
*.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow
*.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation
*.rtf application/rtf, text/rtf Rich Text Format
*.svf image/vnd.svf Simple Vector Format
*.tif image/tiff Tagged Image Format File
*.tiff image/tiff Tagged Image Format File
*.txt text/plain Plain Text
*.wdb application/vnd.ms-works MS Works Database
*.wps application/vnd.ms-works Works Text Document
*.xhtml application/xhtml+xml Extensible HyperText Markup Language
*.xlc application/vnd.ms-excel MS Excel Chart
*.xlm application/vnd.ms-excel MS Excel Macro
*.xls application/vnd.ms-excel MS Excel Spreadsheet
*.xlt application/vnd.ms-excel MS Excel Template
*.xlw application/vnd.ms-excel MS Excel Workspace
*.xml text/xml, application/xml Extensible Markup Language
*.zip aplication/zip Compressed Archive

这里要慎重说明的是:网上好多教程都说 excel过滤要用“accept="application/msexcel"” ,其实是大错特错!测试了,不行! 我也是在做phpExcel导出excel文件是,看到了,有一行代码:

header(‘Content-Type: application/vnd.ms-excel‘);   //excel 2003

header(‘Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet‘);  //excel 2007

html5表单上传控件Files筛选指定格式的文件:accept属性过滤excel文件的更多相关文章

  1. [转]html5表单上传控件Files API

    表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...

  2. antd实战:表单上传,文件列表的过滤与限制。

    用表单上传组件最痛苦的地方是: 他的诸多行为与纯上传组件不一样,而表单的文档关于这一块基本上没有提,只能自己试. 比如我想做一个上传前的拦截. beforeUpload: (file, fileLis ...

  3. 淘宝(阿里百川)手机客户端开发日记第十四篇 jsp提交含有上传控件表单乱码问题

    今天我来总结昨天开发的一个简单的jsp web 应用程序时,在做一个调教表单,从servlet端获取数据,这个表单里含有上传文件控件.如果我们在测试的时候,获取数据的是乱码,这时,大家可以先去掉上传控 ...

  4. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  5. 一般处理程序上传文件(html表单上传、aspx页面上传)

    html 表单上传文件        一般处理程序由于没有 apsx 页面的整个模型和控件的创建周期,而比较有效率.这里写一个用 html 表单进行文件上传的示例.        1. 表单元素选用 ...

  6. 前端上传控件plupload总结

    plupload是一个单图和多图上传控件: 属性和方法介绍,参考以下博客: https://www.cnblogs.com/2050/p/3913184.html 这里直接贴出JS代码,细到爆的注释, ...

  7. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  8. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

  9. FireFox下上传控件的显示问题

    Chrome正常 FireFox显示不正常 上传控件一直有个问题,就是样式问题,解决方法就是用一个大的背景层挡住,然后点大的背景层去触发上传控件的Click事件. Html: <span id= ...

随机推荐

  1. 【目标检测】YOLO:

    PPT 可以说是讲得相当之清楚了... deepsystems.io 中文翻译: https://zhuanlan.zhihu.com/p/24916786 图解YOLO YOLO核心思想:从R-CN ...

  2. 利用Tengine在树莓派上跑深度学习网络

    树莓派是国内比较流行的一款卡片式计算机,但是受限于其硬件配置,用树莓派玩深度学习似乎有些艰难.最近OPENAI为嵌入式设备推出了一款AI框架Tengine,其对于配置的要求相比传统框架降低了很多,我尝 ...

  3. 跑批 - Spring Batch 批处理使用记录

    根据spring官网文档提供的spring batch的demo进行小的测验 启动类与原springboot启动类无异 package com.example.batchprocessing; imp ...

  4. Codeforces Round #545 (Div. 2) E 强连通块 + dag上求最大路径 + 将状态看成点建图

    https://codeforces.com/contest/1138/problem/E 题意 有n个城市(1e5),有m条单向边(1e5),每一周有d天(50),对于每个城市假如在某一天为1表示这 ...

  5. 【2019.7.15 NOIP模拟赛 T1】夹缝(mirror)(思维题)

    思维题 此题应该是比较偏思维的. 假设一次反射后前进的距离是\(2^x(2y+1)\),则显然,它可以看做是前进距离为\(2^x\)的光线经过了\((2y+1)\)次反射,两者是等价的,甚至后者可能还 ...

  6. javaSript 处理电脑和浏览器pc端缩放对页面的影响

    由于用户的个人习惯或其他原因,可能会调整到电脑上的缩放比例或者浏览器的缩放比例,如果访问页面会看起来比较不好看, 电脑上的缩放: 浏览器上的缩放: 解决方法: function detectZoom( ...

  7. 谈谈IntersectionObserver懒加载

    概念 IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段.祖 ...

  8. IntelliJ IDEA最新版2019年注册码,可激活至2099年 激活 破解

    IntelliJ IDEA最新版2019年注册码,可激活至2099年 激活 破解 特别说明:图中的IDEA是2017版本,不过方法对2019版本的IDEA同样适用! 最近笔者测试了好多破解Idea的方 ...

  9. js 为url字符串添加、修改参数

    //为url字符串添加.修改参数 String.prototype.EditUrlParam = function (paramName, replaceWith) { var url = this; ...

  10. Docker使用compose(原Fig)快速编配

    Docker使用compose(原Fig)快速编配 目录 安装 应用 构建以及运行 安装 在Linux上安装Fig: 在OS上安装: 在Linux上安装Fig: sudo bash-c "c ...