HTML Input="file" 接受属性文件类型 (CSV)

Posted 2023-03-14

【中文标题】HTML Input="file" 接受属性文件类型 (CSV)

【英文标题】：HTML Input="file" Accept Attribute File Type (CSV)

【发布时间】：2012-08-03 16:45:51

【问题描述】：

我的页面上有一个文件上传对象：

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

在我的桌面上使用以下 excel 文件：

file1.xlsx file1.xls 文件.csv

我希望文件上传到仅显示.xlsx、.xls和.csv文件。

使用accept 属性，我发现这些内容类型可以处理.xlsx 和.xls 扩展...

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

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

但是，我找不到 Excel CSV 文件的正确内容类型！有什么建议吗？

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

【问题讨论】：

大多数浏览器不尊重accept属性，因为它可以用来鼓励不注意传输敏感文件的用户。

@tletnes 不正确，大多数主流浏览器都支持它

你也可以试试这个 if ($.trim($('#OriginalFileName').val()) != "") var ext = $('#OriginalFileName').val( ).split('.').pop().toLowerCase(); if ($.inArray(ext, ['doc', 'docx', 'pdf', 'xlsx', 'xls']) == -1) $('#OriginalFileNameValid').html('使用 .doc ,.docx,.pdf 文件');

如果任何其他 Ubuntu 用户对此感到困惑，我发现在 Ubuntu 中，Firefox 默认显示“所有文件”，但会将您的“接受”属性添加到文件类型下拉列表中文件选择对话框。

【参考方案1】：

据我所知，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);" />

我想它会对你有所帮助，当然你可以根据需要更改此脚本。

【讨论】：

很酷的解决方法，但我不明白为什么这样的属性被认为是“旧的”。这是几乎每个操作系统上的基本文件选择器功能，浏览器应尽最大努力使其工作，它将帮助许多用户......

accept属性不老，除了IE/Edge之外的主流浏览器都支持：caniuse.com/#feat=input-file-accept。请改写您的答案，因为它具有误导性。

accept 属性最重要的方面是它为打开文件对话框提供的提示。默认情况下，用户应该看到匹配的文件，如果他们愿意，可能会选择其他类型——这就是现在大多数现代浏览器的行为方式。

sender.value 不再有效。应该是 sender.target.value

【参考方案2】：

这很尴尬...我找到了我正在寻找的解决方案，而且再简单不过了。我使用下面的代码得到了想要的结果。

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

有效接受类型：

对于 CSV 文件 (.csv)，请使用：

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

对于 Excel 文件 97-2003 (.xls)，请使用：

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

对于 Excel 文件 2007+ (.xlsx)，请使用：

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

对于文本文件 (.txt)，请使用：

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

对于图像文件 (.png/.jpg/etc)，使用：

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

对于 HTML 文件 (.htm,.html)，使用：

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

对于视频文件（.avi、.mpg、.mpeg、.mp4），请使用：

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

对于音频文件（.mp3、.wav 等），请使用：

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

对于 PDF 文件，使用：

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

演示：http://jsfiddle.net/dirtyd77/LzLcZ/144/

---

注意：

如果您尝试显示 Excel CSV 文件 (.csv)，请不使用：

text/csv application/csv text/comma-separated-values（仅在 Opera 中工作）。

---

如果您尝试显示一个特定的文件类型（例如，WAV 或 PDF），那么这几乎总是可以工作...

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

【讨论】：

Chrome 似乎支持这个属性，但 Firefox 仍在努力。您可以投票给这个错误，以便他们更快地解决它：bugzilla.mozilla.org/show_bug.cgi?id=826176

@DavidRouten 接受属性只会过滤文件类型。您还必须使用文件验证来防止用户选择其他文件类型。希望有帮助！

不适用于 Firefox。有没有其他解决方案可以在 Firefox 中使用。

<input type="file" accept=".csv, text/csv" /> 在 mac 上的 firefox、chrome 和opera 中为我工作。只有 .csv 不能在所有浏览器中运行。

对于上面提到的 xls 和 xlsx mime 类型，请确保您安装了正确的播放器应用程序（如 Microsoft excel 或 word 等）。

【参考方案3】：

我在接受属性中使用text/comma-separated-values 作为CSV mime-type，它在Opera 中运行良好。尝试text/csv 没有运气。

如果建议不起作用，则其他一些用于 CSV 的 MIME 类型：

文本/逗号分隔值 文本/csv 应用程序/csv 应用程序/excel 应用程序/vnd.ms-excel application/vnd.msexcel 文本/任意文本

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

【讨论】：

嗨，多姆！我想说对不起，因为您的回答（标记为正确）是好的，而且我之前没有太多关注它，因为我只在 Opera 中测试该网站。在其他浏览器中测试后，我看到你的回答更完整。但它不适用于所有浏览器。 Firefox 17 不支持在 File Dialog (bugzilla.mozilla.org/show_bug.cgi?id=83749#c14) 中接受 attr how a filter，所以这个属性对我来说是个悬念。无论如何我都会使用 javascript 文件验证，但在接受 attr 中使用 text/csv 因为它是 IANA iana.org/assignments/media-types

的默认设置

【参考方案4】：

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

【讨论】：

根据MDN，This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.关于文件输入，他们继续说file: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.

【参考方案5】：

我已经修改了@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;

我有自定义验证内置，因为在打开文件窗口中用户仍然可以选择选项“所有文件（'*'）”，无论我是否在输入元素中明确设置了接受属性。

【参考方案6】：

您只需执行以下操作即可知道任何文件的正确内容类型：

1) 选择感兴趣的文件，

2) 并在控制台中运行：

console.log($('.file-input')[0].files[0].type);

您还可以为您的输入设置属性“multiple”以一次检查多个文件的内容类型并执行下一步：

for (var i = 0; i < $('.file-input')[0].files.length; i++)
    console.log($('.file-input')[0].files[i].type);

属性accept多属性存在一些问题，在这种情况下不能正常工作。

【讨论】：

执行此操作并选择一个 .csv 文件我得到 type: "text/csv" 但在输入上使用 accept="text/csv" 不能正确过滤文件（在 Brave / Chromium 上测试）。不过使用accept=".csv" 可以。如果您不想在所有常见浏览器中进行测试，为了安全起见，我会同时使用 mime 类型和文件扩展名，例如 accept="text/csv,.csv"。

【参考方案7】：

这对我在 Safari 10 下不起作用：

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

我不得不写这个：

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

【讨论】：

嗨，，，它在我的 safari 上也很好用。但是如果我们想接受excel文档怎么办？你有什么线索吗？ @木马

查看大钱的答案。 TLDR；

【参考方案8】：

现在你可以只使用文件扩展名

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>

【讨论】：

虽然令人惊讶的是，这个（以及替代的 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel）似乎仍然无法在 Edge 41.16299.820.0 ***.com/questions/31875617/… wpdev.uservoice.com/forums/257854-microsoft-edge-developer/… 上工作

【参考方案9】：

除了最佳答案之外，例如，CSV 文件在 macOS 下报告为 text/plain，但在 Windows 下报告为 application/vnd.ms-excel。 所以我用这个：

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

【参考方案10】：

经过我的测试，在【macOS 10.15.7 Catalina】上，【Dom / Rikin Patel】的回答无法正常识别[.xlsx]文件。

我个人总结了大部分现有答案的做法，并通过了个人测试。总结以下答案：

accept=".csv, .xls, .xlsx, text/csv, application/csv,
text/comma-separated-values, application/csv, application/excel,
application/vnd.msexcel, text/anytext, application/vnd. ms-excel,
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"