在javascript中检查文件扩展名的问题

Issue in javascript for checking files extension

本文关键字：扩展名 问题 文件 检查 javascript      更新时间：2023-09-26

我写了用于检查文件扩展名的javascript 

 function Validate() {
    try {
        var Name = document.getElementById('<%=fiFile.ClientID %>').value;
        if (Name == "") {
            return false;
        }
        else {
            var index = Name.lastIndexOf('''') + 1;
            var FileName = Name.substring(index, Name.length);

            var ext = extension(FileName)
            switch (ext) {
                case 'jpg':
                case 'gif':
                case 'png':
                case 'bmp':
                case 'pdf':
                case 'txt':
                case 'doc':
                case 'docx':
                case 'xls':
                case 'xlsx':
                case 'xlr':
                case 'mdf':
                case 'ppt':
                case 'pptx':
                case 'msg':
                case 'log':
                case 'bak':
                case 'xml':
                case 'html':
                case 'mp3':
                case 'm4a':
                case 'm3u':
                case 'mid':
                case 'wma':
                case 'wav':
                case 'mp4':
                case 'mpg':
                case 'm4v':
                case 'vob':
                case 'mnv':
                case 'rm':
                case 'mov':
                case 'flv':
                case 'wmv':
                        return true;
                    break;
                default:
                    alert('Select a proper file');
                    return false;
            }
        }
    }
    catch (err) {
        alert(FileName);
    }
}
function extension(fname) {
    try {
        var pos = fname.lastIndexOf(".");
        var strlen = fname.length;
        if (pos != -1 && strlen != pos + 1) {
            var ext = fname.split(".");
            var len = ext.length;
            var extension = ext[len - 1].toLowerCase();
        } else {
            extension = "No extension found";
        }
    }
    catch (errr)
    { }
    return extension;
}

当我上传其他文件（如.exe）时，页面仍然会刷新并保存文件。我希望当用户上传带有其他扩展名的文件时，页面不应刷新，也不应保存文件。请帮帮我!!

为什么不直接使用HTML5方式进行文件选择？

<input type="file" accept="image/*, video/*, audio/* application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint">

您可以随时添加我错过的MIME类型或随意调整，但是此文件将限制文件类型以支持，因此您不必对其进行显式检查。

使用 jQuery 库的解决方案（jquery.validate.min.js 和 additional-methods.js

）： 
$("#vform").validate({
    rules: {
        fileName: {
            extension: "jpg|gif|png|bmp|pdf|txt|doc|docx|xls|xlsx|xlr|mdf|ppt|pptx|msg|log|bak|xml|html|mp3|m4a|m3u|mid|wma|wav|mp4|mpg|m4v|vob|mnv|rm|mov|flv|wmv"
        }
    },
    messages: {
        fileName: "You may not upload this type of file."
    }
});

演示小提琴

您可以将 accept 属性用于文件输入字段，如下所示，

<form action="demo_form.asp">
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>

语法：
<input accept="file_extension|audio/*|video/*|image/*|media_type">

file_extension-- 以 STOP 字符开头的文件扩展名，例如：.gif、.jpg、.png.doc
audio/* -- 接受
所有声音文件video/* -- 接受
所有视频文件image/* -- 接受
所有图像文件media_type -- 不带参数的有效媒体类型。查看 IANA 媒体类型，获取标准媒体类型
的完整列表

否则您可以像下面这样手动检查，

<form action="demo_form.asp" onsubmit='return validate()' method="post">
<input type="file" name="pic">
<input type="submit">
</form>


如果您的验证函数给出 True 作为返回，则只有表单将提交，否则什么也不做。

相关文章：