如何使用 JQuery 在输入类型文件中验证文件扩展名？答案

【问题标题】：How can the file extension be validated in an input type file using JQuery?如何使用 JQuery 在输入类型文件中验证文件扩展名？
【发布时间】：2011-08-12 14:49:06
【问题描述】：

HTML：

<input type="file" name="group_documents_file" id="group_documents_file" class="group-documents-file" />

规则：要上传的文件必须具有扩展名 JPEG、GIF 或 PNG，否则必须显示警报。

【问题讨论】：

标签： jquery html validation file-upload

【解决方案1】：

你只需要拉取元素的值：

var fileName = $('#group_document_file').val();

var extension = fileName.slice('.')[fileName.slice('.').length - 1].toLowerCase();

if(extension == 'jpeg' || extension == 'gif' || extension == 'png')
   // Show Validated Image
else
   alert('Choose a supported image format');

【讨论】：

当你可以使用正则表达式时，不需要双切片。看我的回答。
如果你有问题并决定用正则表达式解决它，现在你有两个问题。 =D
这是一句老程序员的话，一点也不小；首先是因为您需要构建一个能够真正解决您的问题的正则表达式，其次是因为当您必须在精神上解析正则表达式以弄清楚代码在做什么时，代码的可读性会降低。
再一次，在我看来，这真的取决于具体情况。当想出一个疯狂复杂的正则表达式来解决一个简单的问题时，你是对的。但在这种特殊情况下，正则表达式是两者中更清晰、更易读的一种。
至少使用“pop”而不是“length - 1”。看我的回答。

【解决方案2】：

请参阅此处：get the filename of a fileupload in a document through javascript，了解如何获取文件名：

var extension = $('#group_documents_file').val().match(/[^.]+$/).pop().toLowerCase();

这应该会在文件名中的句点之后为您提供任何信息。

编辑：

如果你不想使用正则表达式，我建议使用 split, with pop：

var extension = $('#group_documents_file').val().split('.').pop().toLowerCase();

然后，要检查允许的扩展名，请执行以下操作：

if ( ~$.inArray(extension, ['jpg', 'jpeg', 'gif', 'png']) ) {
    // correct file type...
} else {
    // incorrect file type...
}

【讨论】：

嗨约瑟夫，第一个解决方案不起作用，您需要在 regEx 之后添加 .pop() :) var extension = $('#group_documents_file').val().match(/[ ^.]+$/).pop().toLowerCase();

【解决方案3】：

以下获取文件的扩展名：

JS：

$('#group_documents_file').change(function(){
    var value = this.value;
    val = value.split("\\");
    var file = (val[val.length - 1]).split('.');
    var ext = file[file.length - 1];
    alert(ext);
})

小提琴：http://jsfiddle.net/maniator/gveqX/

【讨论】：

【解决方案4】：

试试这个

var fName = $('#group_document_file').val();

var validExtns ["jpg", "gif", "png"];

var extn = fName.slice('.')[fName.slice('.').length - 1];

if($.inArray(extn.toLowerCase(), validExtns) != -1){
   // Show Validated Image
}
else{
   alert('Invalid image format');
}

【讨论】：