html input=”file” 浏览时只显示指定文件类型 xls、xlsx、csv


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

Valid Accept Types:

For CSV files (.csv), use:

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

For Excel Files 2003-2007 (.xls), use:

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

For Excel Files 2010 (.xlsx), use:

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

For Text Files (.txt) use:

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

For Image Files (.png/.jpg/etc), use:

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

For HTML Files (.htm,.html), use:

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

For Video Files (.avi, .mpg, .mpeg, .mp4), use:

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

For Audio Files (.mp3, .wav, etc), use:

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

For PDF Files, use:

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

DEMO:

http://jsfiddle.net/dirtyd77/LzLcZ/144/

NOTE:

If you are trying to display Excel CSV files (.csv), do NOT use:

  • text/csv
  • application/csv
  • text/comma-separated-values (works in Opera only).

    If you are trying to display a particular file type (for example, a WAV or PDF), then this will almost always work…
 <input type="file" accept=".FILETYPE" />

原文:http://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv

HTML input="file" 浏览时只显示指定文件类型 xls、xlsx、csv的更多相关文章

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

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

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

    <p>显示 .xls, .xlsx, .csv 文件...</p> <input type="file" accept=".csv, app ...

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

    <p>显示 .xls, .xlsx, .csv 文件...</p><input type="file" accept=".csv, appl ...

  4. css控制打印时只显示指定区域

      CreateTime--2017年9月26日08:16:04 Author:Marydon css控制打印时只显示指定区域 思路: 1.使用打印命令@media print: 2.控制执行打印命令 ...

  5. findstr 只搜寻指定文件类型

    Title:findstr 只搜寻指定文件类型 --2012-05-04 09:27 findstr /i /m /S /C:"关键字"  *.php *.asp *.jsp

  6. input file控件限制上传文件类型

    网页上添加一个input file HTML控件: <input id="File1" type="file" /> 默认是这样的,所有文件类型都会 ...

  7. 【转】input file accept属性可以限制的文件类型

    来源:http://blog.sina.com.cn/s/blog_6c9d65a10101a8yh.html 在上传文件的时候,需要限制指定的文件类型. <input type="f ...

  8. html属性,上传图片选择时只显示图片文件

    这个实现比较简单,就是用到accept属性: 注意这里我们对这个file元素进行了隐藏,因为它默认呈现是下面这个样子的,并不好看. <div style="display:none;& ...

  9. HTML5中的input type为file控件限制上传文件类型及扩展

    简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...

随机推荐

  1. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  2. 《看板与Scrum》读书笔记

    看板的朴素思想:在制品(work-in-progress, WIP)必须被限制 WIP上限和拉动式生产 1. Scrum与看板简述 Scrum:组织拆分,工作拆分,开发时间拆分,优化发布计划,过程优化 ...

  3. win764位Ruby2.0环境搭建之Ruby on Rails

    一:安装Ruby 1.在http://rubyinstaller.org 下载需要的ruby版本,因为是exe文件,所以,你可以直接安装. 安装结束后,cmd上运行 ruby -v 显示版本号.如果正 ...

  4. Android中下载、安装和卸载(原)

    应用场景:在检查版本更新的时候经常需要从服务器端下载然后安装到手机中 使用工具: XUtils,这个开源的框架真的是需要花大把时间去阅读和理解的,十分有用的,on the way ! fighting ...

  5. 修改安卓串口蓝牙app问题记录

    * 在网上下载的安卓的蓝牙串口app都是基于eclipse的,但往as里边导入时都存在问题. 迫不得已最后我使用的办法还是在as下面新建工程,然后把相关文件导入.不过还是遇到了其他的问题. * 某个蓝 ...

  6. js点击空白处弹窗消失

    $(document).mousedown(function(e){ var _list = $('#pop'); if(!_list.is(e.target) && _list.ha ...

  7. javascript onblur事件阻塞选中input框

    先上问题实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  8. React 学习笔记(学习地址汇总)

    好的博文地址:http://www.ruanyifeng.com/blog/2015/03/react.html 官网学习地址:http://facebook.github.io/react/docs ...

  9. 灰色蓝色系简洁自适应登录HTML页面

    自己写了一个简介的登录页面,页面背景为灰色,居中为登录框,登录面板为半透明效果,整体十分美观,登录按钮有JS效果.自己感觉还不错,拿出来分享一下. 页面效果图 源码下载链接:http://files. ...

  10. eclipse编辑器配置

    1.添加行号 在侧边空白处右键 勾选如图 2.改字体 window -> preferences 字体的常用配置 Consolas有一个问题是中文字体难以看清 解决方式有两种:一.把字体设置为C ...