HTML Input="file" 接受属性文件类型 (CSV)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11832930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Input="file" Accept Attribute File Type (CSV)
提问by Dom
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.xls
- file.csv
- 文件1.xlsx
- 文件1.xls
- 文件.csv
I want the file upload to ONLYshow .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.ms-excel (.XLS)
accept
= application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)
accept
= application/vnd.ms-excel (.XLS)
However, I cannot find the correct content-type for an Excel CSV file! Any suggestions?
但是,我找不到 Excel CSV 文件的正确内容类型!有什么建议?
EXAMPLE: http://jsfiddle.net/LzLcZ/
回答by Dom
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 CSVfiles (.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 文件 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:
http://jsfiddle.net/dirtyd77/LzLcZ/144/
演示:http:
//jsfiddle.net/dirtyd77/LzLcZ/144/
NOTE:
笔记:
If you are trying to display Excel CSV files (.csv
), do NOTuse:
如果您尝试显示 Excel CSV 文件 ( .csv
),请勿使用:
text/csv
application/csv
text/comma-separated-values
(works in Opera only).
text/csv
application/csv
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...
如果您尝试显示特定的文件类型(例如, aWAV
或PDF
),那么这几乎总是有效...
<input type="file" accept=".FILETYPE" />
回答by Big Money
These days you can just use the file extension
这些天你可以只使用文件扩展名
<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>
回答by yogi
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.
我想它会帮助你当然你可以根据你的需要更改这个脚本。
回答by jaysponsored
I have used text/comma-separated-values
for CSV mime-type in accept attribute and it works fine in Opera. Tried text/csv
without luck.
我text/comma-separated-values
在接受属性中使用了 CSV mime-type,它在 Opera 中运行良好。尝试text/csv
没有运气。
Some others MIME-Types for CSV if the suggested do not work:
如果建议不起作用,则其他一些 CSV 的 MIME 类型:
- text/comma-separated-values
- text/csv
- application/csv
- application/excel
- application/vnd.ms-excel
- application/vnd.msexcel
- text/anytext
- 文本/逗号分隔值
- 文本/csv
- 应用程序/csv
- 应用程序/excel
- 应用程序/vnd.ms-excel
- 应用程序/vnd.msexcel
- 文本/任何文本
回答by trojan
This didn't work for me under Safari 10:
这在 Safari 10 下对我不起作用:
<input type="file" accept=".csv" />
I had to write this instead:
我不得不写这个:
<input type="file" accept="text/csv" />
回答by Olga Lisovskaya
You can know the correct content-type for any file by just doing the following:
只需执行以下操作,您就可以知道任何文件的正确内容类型:
1) Select interested file,
1) 选择感兴趣的文件,
2) And run in console this:
2)并在控制台中运行:
console.log($('.file-input')[0].files[0].type);
You can also set attribute "multiple" for your input to check content-type for several files at a time and do next:
您还可以为您的输入设置属性“multiple”以一次检查多个文件的内容类型,然后执行以下操作:
for (var i = 0; i < $('.file-input')[0].files.length; i++){
console.log($('.file-input')[0].files[i].type);
}
Attribute accept has some problems with multiple attribute and doesn't work correctly in this case.
属性接受在多个属性方面存在一些问题,在这种情况下无法正常工作。
回答by RenatoIvancic
I have modified the solution of @yogi. The addition is that when the file is of incorrect format I reset the input element value.
我已经修改了@yogi 的解决方案。另外,当文件格式不正确时,我会重置输入元素值。
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.
我有自定义验证内置,因为在打开的文件窗口中,用户仍然可以选择选项“所有文件('*')”,无论我是否在输入元素中明确设置了接受属性。
回答by iiic
Now you can use new html5 input validation attribute pattern=".+\.(xlsx|xls|csv)"
.
现在您可以使用新的 html5 输入验证属性pattern=".+\.(xlsx|xls|csv)"
。