JS 判断文件类型|极客笔记

JS 判断文件类型

在前端开发中，有时候我们需要判断上传的文件类型，以确保用户上传的文件符合我们的要求。在 JavaScript 中，我们可以通过不同的方法来判断文件的类型，比如根据文件名、文件后缀名、或者文件的 MIME 类型来进行判断。本文将详细介绍如何使用 JavaScript 来判断文件类型。

通过文件名判断文件类型

我们可以通过文件的名称来判断文件的类型，通常文件名中包含了文件类型的信息。比如，如果一个文件名中包含了.jpg、.png、.gif等后缀名，那么我们可以判断这是一个图片文件。

下面是一个 JavaScript 函数，用来判断文件类型：

function checkFileType(fileName) {
    if (fileName.match(/\.(jpg|jpeg|png|gif) $/)) { return "image"; } else if (fileName.match(/\.(doc|docx)$ /)) {
        return "word";
    } else if (fileName.match(/\.(xls|xlsx) $/)) { return "excel"; } else if (fileName.match(/\.(pdf)$ /)) {
        return "pdf";
    } else {
        return "unknown";
    }
}

// 测试
console.log(checkFileType("example.jpg")); // 输出 "image"
console.log(checkFileType("example.docx")); // 输出 "word"
console.log(checkFileType("example.xlsx")); // 输出 "excel"
console.log(checkFileType("example.pdf")); // 输出 "pdf"
console.log(checkFileType("example.txt")); // 输出 "unknown"

上面的代码定义了一个checkFileType函数，传入一个文件名作为参数，该函数会根据文件名中的后缀名来判断文件类型。我们可以通过测试该函数来查看不同类型文件的判断结果。

通过文件后缀名判断文件类型

除了通过文件名来判断文件类型外，我们还可以通过文件的后缀名来判断文件类型。与上面的方法类似，只不过这里我们直接传入文件的后缀名作为参数。

下面是一个通过文件后缀名判断文件类型的示例代码：

function checkFileTypeByExtension(extension) {
    switch (extension.toLowerCase()) {
        case "jpg":
        case "jpeg":
        case "png":
        case "gif":
            return "image";
        case "doc":
        case "docx":
            return "word";
        case "xls":
        case "xlsx":
            return "excel";
        case "pdf":
            return "pdf";
        default:
            return "unknown";
    }
}

// 测试
console.log(checkFileTypeByExtension("jpg")); // 输出 "image"
console.log(checkFileTypeByExtension("docx")); // 输出 "word"
console.log(checkFileTypeByExtension("xlsx")); // 输出 "excel"
console.log(checkFileTypeByExtension("pdf")); // 输出 "pdf"
console.log(checkFileTypeByExtension("txt")); // 输出 "unknown"

上面的代码定义了一个checkFileTypeByExtension函数，传入一个文件后缀名作为参数，该函数会根据后缀名来判断文件类型。同样可以通过测试该函数来查看不同类型文件的判断结果。

通过文件的 MIME 类型判断文件类型

除了通过文件名和后缀名来判断文件类型外，我们还可以通过文件的 MIME 类型（Multipurpose Internet Mail Extensions）来判断文件类型。MIME 类型是一种标准的文件类型标识方式，每种文件类型都对应一个唯一的 MIME 类型。

下面是一个通过文件的 MIME 类型判断文件类型的示例代码：

function checkFileTypeByMIME(mimeType) {
    switch (mimeType) {
        case "image/png":
        case "image/jpeg":
        case "image/jpg":
        case "image/gif":
            return "image";
        case "application/msword":
        case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
            return "word";
        case "application/vnd.ms-excel":
        case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
            return "excel";
        case "application/pdf":
            return "pdf";
        default:
            return "unknown";
    }
}

// 测试
console.log(checkFileTypeByMIME("image/png")); // 输出 "image"
console.log(checkFileTypeByMIME("application/vnd.openxmlformats-officedocument.wordprocessingml.document")); // 输出 "word"
console.log(checkFileTypeByMIME("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")); // 输出 "excel"
console.log(checkFileTypeByMIME("application/pdf")); // 输出 "pdf"
console.log(checkFileTypeByMIME("text/plain")); // 输出 "unknown"

上面的代码定义了一个checkFileTypeByMIME函数，传入一个文件的 MIME 类型作为参数，该函数会根据 MIME 类型来判断文件类型。同样可以通过测试该函数来查看不同类型文件的判断结果。