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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:07:26  来源:igfitidea点击:

HTML Input="file" Accept Attribute File Type (CSV)

htmlcsvfile-uploadinputcontent-type

提问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 文件:

  1. file1.xlsx
  2. file1.xls
  3. file.csv
  1. 文件1.xlsx
  2. 文件1.xls
  3. 文件.csv

I want the file upload to ONLYshow .xlsx, .xls, & .csvfiles.

我希望文件上传显示.xlsx, .xls, &.csv文件。

Using the acceptattribute, I found these content-types took care of .xlsx& .xlsextensions...

使用该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/

示例: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 WAVor PDF), then this will almost always work...

如果您尝试显示特定的文件类型(例如, aWAVPDF),那么这几乎总是有效...

 <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-valuesfor CSV mime-type in accept attribute and it works fine in Opera. Tried text/csvwithout 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
  • 文本/任何文本

Source: http://filext.com/file-extension/CSV

来源:http: //fileext.com/file-extension/CSV

回答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)"