HTML输入=“文件”接受属性文件类型（CSV）

本文翻译自：HTML Input=“file” Accept Attribute File Type (CSV)

I have a file upload object on my page: 我的页面上有一个文件上传对象：

<input type="file" ID="fileSelect" />

with the following excel files on my desktop: 在我的桌面上使用以下excel文件：

file1.xlsx file1.xlsx

file1.xls file1.xls

file.csv FILE.CSV

I want the file upload to ONLY show .xlsx , .xls , & .csv files. 我希望文件上传只显示.xlsx ， .xls和.csv文件。

Using the accept attribute, I found these content-types took care of .xlsx & .xls extensions... 使用accept属性，我发现这些内容类型处理.xlsx和.xls扩展...

accept = application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX) accept = application / vnd.openxmlformats-officedocument.spreadsheetml.sheet（.XLSX）

accept = application/vnd.ms-excel (.XLS) accept = application / vnd.ms-excel（.XLS）

However, I cannot find the correct content-type for an Excel CSV file! 但是，我找不到Excel CSV文件的正确内容类型！ Any suggestions? 有什么建议？

EXAMPLE: http://jsfiddle.net/LzLcZ/ 示例： http ： //jsfiddle.net/LzLcZ/

#1楼

参考：https://stackoom.com/question/neHi/HTML输入-文件-接受属性文件类型-CSV

#2楼

Dom this attribute is very old and not accepted in modern browsers as far as I know, But here is an alternative to it, Try this Dom这个属性很老，据我所知在现代浏览器中不被接受，但是这里有一个替代它，试试这个

<script type="text/javascript" language="javascript">
function checkfile(sender) {var validExts = new Array(".xlsx", ".xls", ".csv");var fileExt = sender.value;fileExt = fileExt.substring(fileExt.lastIndexOf('.'));if (validExts.indexOf(fileExt) < 0) {alert("Invalid file selected, valid files are of " +validExts.toString() + " types.");return false;}else return true;
}
</script><input type="file" id="file" onchange="checkfile(this);" />

I guess it'll help you of course you can change this script according to your needs. 我想它会帮助你，当然你可以根据你的需要改变这个脚本。

#3楼

Well this is embarrassing... I found the solution I was looking for and it couldn't be simpler. 这是令人尴尬的...我找到了我正在寻找的解决方案，它不可能更简单。 I used the following code to get the desired result. 我使用以下代码来获得所需的结果。 Hope this helps someone in the future. 希望这可以帮助将来的某个人。 Thanks everyone for your help. 谢谢大家的帮助。

<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: 对于CSV文件（.csv），请使用：

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

For Excel Files 97-2003 (.xls), use: 对于Excel文件97-2003 （.xls），请使用：

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

For Excel Files 2007+ (.xlsx), use: 对于Excel Files 2007+ （.xlsx），请使用：

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

For Text Files (.txt) use: 对于文本文件（.txt），请使用：

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

For Image Files (.png/.jpg/etc), use: 对于图像文件（.png / .jpg / etc），请使用：

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

For HTML Files (.htm,.html), use: 对于HTML文件（.htm，.html），请使用：

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

For Video Files (.avi, .mpg, .mpeg, .mp4), use: 对于视频文件（.avi，.mpg，.mpeg，.mp4），请使用：

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

For Audio Files (.mp3, .wav, etc), use: 对于音频文件（.mp3，.wav等），请使用：

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

For PDF Files , use: 对于PDF文件，请使用：

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

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

NOTE: 注意：

If you are trying to display Excel CSV files ( .csv ), do NOT use: 如果您要显示Excel CSV文件（ .csv ），请不要使用：

text/csv
application/csv
text/comma-separated-values ( works in Opera only ). text/comma-separated-values （ 仅适用于Opera ）。

If you are trying to display a particular file type (for example, a WAV or PDF ), then this will almost always work... 如果您尝试显示特定的文件类型 （例如， WAV或PDF ），那么这几乎总是有效...

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

#4楼

I have used text/comma-separated-values for CSV mime-type in accept attribute and it works fine in Opera. 我在accept属性中使用了CSV mime-type的text/comma-separated-values ，它在Opera中运行正常。 Tried text/csv without luck. 尝试text/csv没有运气。

Some others MIME-Types for CSV if the suggested do not work: 如果建议不起作用，则其他一些用于CSV的MIME类型：

text/comma-separated-values 文本/逗号分隔值
text/csv 文/ CSV
application/csv 应用程序/ CSV
application/excel 应用程序/ EXCEL
application/vnd.ms-excel 应用/ vnd.ms-Excel中
application/vnd.msexcel 应用程序/ vnd.msexcel
text/anytext 文/ anytext

Source: http://filext.com/file-extension/CSV 资料来源： http ： //filext.com/file-extension/CSV

#5楼

现在您可以使用新的html5输入验证属性pattern=".+\\.(xlsx|xls|csv)" 。

#6楼

I have modified the solution of @yogi. 我修改了@yogi的解决方案。 The addition is that when the file is of incorrect format I reset the input element value. 另外一点是，当文件格式不正确时，我重置输入元素值。

function checkFile(sender, validExts) {var fileExt = sender.value;fileExt = fileExt.substring(fileExt.lastIndexOf('.'));if (validExts.indexOf(fileExt) < 0 && fileExt != "") {alert("Invalid file selected, valid files are of " +validExts.toString() + " types.");$(sender).val("");return false;}else return true;
}

I have custom verification buildin, because in open file window the user can still choose the options "All files ('*')", regardless if I explicitly set the accept attribute in input element. 我有自定义验证buildin，因为在打开文件窗口中，用户仍然可以选择“所有文件（'*'）”选项，无论我是否在输入元素中显式设置了accept属性。

HTML输入=“文件”接受属性文件类型（CSV）相关推荐

GIT_忽略文件和属性文件配置
本地仓库的文件忽略规则可以在.git/info/exclude文件中添加.这些忽略的文件不会提交到共享库中,因而不会被协作者所共享. .gitignore则会被工程所有人员忽略,而且其中的文件必须不能 ...
加载oracle属性文件,关于属性文件的详细介绍
我们通常会将Java应用的配置参数保存在属性文件中,Java应用的属性文件可以是一个正常的基于key-value对,以properties为扩展名的文件,也可以是XML文件. 在本案例中,將会向大家介 ...
创建shap文件的属性字段类型区别_在ArcGIS中为Shapefile属性表增加字段
摘要: 属性描述了要素的相关特性,并存储于表中.在创建新的属性表或是向已有的属性表中增加字段的时候,必须指明数据类型和字段属性,比如精度(Precision)或长度(Length).数据类型的选择和相 ...
关于单体化和属性文件的说明
关于单体化单体化效果做出来也有段时间了,可能还是有些问题没有讲清楚,我们这里再说下单体化矢量的制作单体化的原理就是一个通过矢量文件构造一个个封闭的几何体去附着到被分类的对象(倾斜或者地形),所以 ...
Liunx文件的属性(权限) 超详细解析
目录前言文件的类型 rwx权限文件的属性实战分析一下前言看到上面那张图是不是十分的懵逼,不知道那一串字符代表的啥意思. 接下来我们来一步步分析搞懂. 正所谓,工欲善其事,必先利其器. 我们 ...
java log4j 代码配置文件_除了Log4jXML、属性文件和源代码(主要是Java)之外的配置日志的方法?...
我在看一些应用程序的源代码.它正在使用 Spring框架.Apache瓦片.JSP.Log4J.Java.JavaScript.jQuery.JQPrand.Jsch 等. 我知道日志是在哪里创建的. ...
Linux 文件的属性
Linux中的文件 1.1 文件属性概述(ls -lhi) linux里一切皆文件 Linux系统中的文件或目录的属性主要包括:索引节点(inode),文件类型,权限属性,链接数,所归属的用户和用户组 ...
如何解析属性文件（properties）获取键值对的值？
文章目录创建属性文件解析属性文件获取数据使用类加载器使用 File 对象创建属性文件新建 db-oracle.properties , 存放项目必须使用到的参数: driver = ora ...
JAVA操作属性文件，可进行读写更改
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! JAVA ...

HTML输入=“文件”接受属性文件类型（CSV）

#1楼

#2楼

#3楼

Valid Accept Types: 有效接受类型：

#4楼

#5楼

#6楼

HTML输入=“文件”接受属性文件类型（CSV）相关推荐

最新文章

热门文章