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

摘自: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

我才明白,原来 .xls 格式的文件,要用这个 MIME 类型。 测试,成功!

时间: 2024-10-24 11:07:19

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

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

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

如何清空文件上传控件里的选定文件(路径)

我又来扯鸡毛蒜皮了.有名言曰人生短得不够扯鸡毛蒜皮,但我的工作就是由无数的鸡毛蒜皮组成,如之奈何? 今天的鸡毛和蒜皮是:如何清空文件上传控件里的选定文件(路径)? 场景是酱紫的: 有一个上传控件和一个按钮,其中上传控件隐藏.点击按钮,触发上传控件点击事件,于是弹出文件选择对话框:选好文件后,于是触发了上传控件的onchange事件.在这个事件里,将文件上传. 有点装逼,就是隐藏了上传控件.这可能是出于界面简约的考虑.问题是,同一个文件不能连续上传2次,因为路径不变,没有触发onchange事件.

怎样清空文件上传控件里的选定文件(路径)

我又来扯鸡毛蒜皮了. 有名言曰人生短得不够扯鸡毛蒜皮,但我的工作就是由无数的鸡毛蒜皮组成,如之奈何? 今天的鸡毛和蒜皮是:怎样清空文件上传控件里的选定文件(路径)? 场景是酱紫的: 有一个上传控件和一个button.当中上传控件隐藏.点击button,触发上传控件点击事件,于是弹出文件选择对话框:选好文件后.于是触发了上传控件的onchange事件.在这个事件里.将文件上传. 有点装逼,就是隐藏了上传控件. 这可能是出于界面简约的考虑.问题是.同一个文件不能连续上传2次.由于路径不变,没有触发o

node.js学习(2)--路由功能以及表单上传

今天按照<node.js入门>这本书学习了node的一些基础知识,包括服务器的创建,路由功能的实现,表单上传和数据处理,感觉开始明白了node.js的一些基本原理.这本书说的很详细也很基础,很适合初学者学习.node.js入门 众所周知,node跟php语言不一样,node不需要依赖于apache等服务器,因为node本身就能够构建服务器!所以,再用node开发网站之前我们首先得学会如何搭建服务器.关于node创建服务器在我之前的博客已经有介绍,这里不再赘述. 完成一个表单上传与数据处理的de

文件上传控件值发生变化后自动提交表单

当文件上传控件发生变化后自动提交表单,首先在页面加载完成后注册change事件,然后检测到值得变化后提交上传代码,代码备忘. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> window.

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

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

Html5之基础-9 HTML表单、其他控件、其他常用标记

一.表单概述 表单的作用 (1) 表单用于显示.收集信息,并提交信息到服务器 (2) 表单有两个基本部分 - 实现数据交互的可见的界面元素,比如文本框或按钮 - 提交后的表单处理 (3) 页面元素 - 使用 <form> 元素创建表单 - 在 <form> 元素中添加其他表单可以包含的控件元素 如图: 表单元素 <form> (1) 定义表单:使用成对的 <form></form>标记 (2) 主要属性 - action:  定义表单被提交时发生

(三)关于kendo IU表单form各类控件的数据绑定

=====================input textarea============================= <div id="view"> <input data-bind="value: inputValue" /> <textarea data-bind="value: textareaValue"></textarea> </div> <script&g

AngularJS 文件上传控件 ng-file-upload

网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js文件的结构都是一样的.核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能. 按道理讲shim.js应该是可加可不