输入文件只能是.xls文件[重复]答案

【问题标题】：input file only be .xls file [duplicate]输入文件只能是.xls文件[重复]
【发布时间】：2013-06-17 11:20:22
【问题描述】：

我正在研究 html 和 java 脚本。我有文件类型输入，我希望输入文件应该只是 .xls 文件

 <input type='file' id ="browse" name ="browse"/>

现在我希望所选文件仅为 .xls 文件 ..并读取该 xls 文件。如何用 java 脚本做到这一点......如果有人能用 JavaScript 代码解释我，那将不胜感激。

【问题讨论】：

@sircapsalot - 你能用 JavaScript 做到这一点吗？

标签： javascript html

【解决方案1】：

试试这个代码

<input type='file' id ="browse" name ="browse"/>

    var file = document.getElementById('browse');

    file.onchange = function(e){
        var ext = this.value.match(/\.([^\.]+)$/)[1];
        switch(ext)
        {
            case 'xls':
                alert('allowed');
                break;
            default:
                alert('not allowed');
                this.value='';
        }
};

还有DEMO

【讨论】：

【解决方案2】：

这将在选择文件后检查文件扩展名。如果不是.xls，则抛出alert错误：

document.getElementById("browse").onchange = function() {
    var fileName = this.value;
    var fileExtension = fileName.substr(fileName.length - 4);

    console.log(fileExtension);
    if (fileExtension != ".xls") {
        alert("That ain't no .xls file!");
    }
}

演示：http://jsfiddle.net/sn5sY/

【讨论】：

这是一个部分解决方案，但可以轻松绕过，也应该与服务器端验证结合使用。您不能仅使用客户端代码来限制这一点。

【解决方案3】：

使用标准 HTML 4 是不可能的

Limit file format when using <input type="file">? 可能重复

HTML 5 中有一个accept 属性，但不能保证。更多信息可以在 HTML 5 规范中找到 http://www.w3.org/html/wg/drafts/html/master/forms.html#attr-input-accept

【讨论】：