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

时间:2022-09-10 10:41:27

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://*.com/questions/11832930/html-input-file-accept-attribute-file-type-csv

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

  1. &lt&semi;input type&equals;&quot&semi;file&quot&semi; &sol;&gt&semi;浏览时只显示指定文件类型

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

  2. input&equals;&quot&semi;file&quot&semi; 浏览时只显示指定excel文件,筛选特定文件类型

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

  3. nput&equals;&quot&semi;file&quot&semi; 浏览时只显示指定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. 使用C&num;在CEF中拦截并响应请求

    一.前言 忙里偷闲,研究了一下如何在CEF中拦截请求,并作出响应.这个功能对某些需要修改服务器响应的需求来说必不可少,可以直接读取本地文件作为响应内容. C#的CEF封装项目有很多,我使用的是Chro ...

  2. Selenium调用Chrome&comma;Firefox&comma;IE

    C#环境下,使用Selenium调用不同的浏览器,可以使用如下方法: IWebDriver driver = null; string Browser =null; if (Browser.Equal ...

  3. JMS确认机制

    JMS中为数不多的重点就是消息的确认机制,下面分别介绍J2EE和Spring的MessageListenerContainer的确认机制 J2EE中JMS确认机制 在JMS规范中一共4种确认方式 AU ...

  4. 终端改变host的类型&comma;还原

  5. redis系列之redis是什么

    一.简介 REmote DIctionary Server(Redis),redis是一个基于内存的单机key/value系统,类似memcached,但支持value为多种形式,包括:字符串(str ...

  6. mina2&period;0 spring

    Apache MINA是一个网络应用程序框架,它可以帮助用户开发的高性能.高扩展性的网络应用程序.它提供了一个抽象的事件驱动的异步API在不同传输如TCP/IP和UDP/IP通过java NIO. A ...

  7. Drawable&lpar;3&rpar;Color State List Resource

    注意 Color State List Resource 与 Color不同,前者是颜色状态表.根据不同状态显示不同颜色,它是State list,里面有多种颜色,后者只是一个颜色. Color St ...

  8. Session&comma;ViewState用法

      基本理论: session值是保存在服务器内存上,那么,可以肯定,大量的使用session将导致服务器负担加重. 而viewstate由于只是将数据存入到页面隐藏控件里,不再占用服务器资源,因此, ...

  9. jquery Ajax 实现图片上传的功能。

    $('#image').on('change', function () {         var url = "";         var form = new FormDa ...

  10. Android studio 中,遇到报错:ERROR&colon; x86&lowbar;64 emulation currently requires hardware acceleration&excl; CPU acceleration status&colon;HAXM must be updated&lpar;version 1&period;1&period;1&lt&semi;6&period;0&period;1&rpar;的解决方法

    在 Android SDK 的安装目录下找到intelhaxm-android.exe安装即可.忘记目录位置直接在“计算机”中搜索,如果没有,返回Android studio 的“设置”,找到 这个图 ...