js 判断文件类型并控制表单提交示例代码

下面我将为您详细讲解JavaScript中如何判断文件类型并控制表单提交，以及两条示例说明。请您耐心阅读。

一、如何判断文件类型

在JavaScript中判断文件类型通常有两种方式：一种是通过文件后缀名进行判断，另一种是通过文件的mime类型判断。下面我们分别进行介绍。

1. 通过文件后缀名进行判断

通过文件后缀名判断文件类型是最为常见的方式，我们只需要获取文件名及其后缀，然后根据文件后缀判断文件类型即可。下面是示例代码：

function getFileType(fileName) {
    var index = fileName.lastIndexOf(".");
    if (index !== -1) {
        var suffix = fileName.substr(index + 1).toLowerCase();
        // 文件类型判断
        if (suffix === "jpg" || suffix === "jpeg" || suffix === "png") {
            return "image";
        } else if (suffix === "doc" || suffix === "docx" || suffix === "txt") {
            return "document";
        } else if (suffix === "mp4" || suffix === "avi" || suffix === "wmv") {
            return "video";
        } else if (suffix === "xls" || suffix === "xlsx" || suffix === "csv") {
            return "excel";
        } else {
            return "unknown";
        }
    }
}

2. 通过文件的mime类型判断

通过文件的mime类型判断文件类型可以说是更为准确的方式，而且不受文件后缀名的干扰。我们可以通过File对象的type属性获取文件的mime类型，然后根据mime类型判断文件类型。下面是示例代码：

function getFileType(file) {
    var fileType = file.type;
    if (fileType.indexOf("image") !== -1) {
        return "image";
    } else if (fileType.indexOf("video") !== -1) {
        return "video";
    } else if (fileType.indexOf("application/pdf") !== -1) {
        return "pdf";
    } else if (fileType.indexOf("text/plain") !== -1 || fileType.indexOf("application/msword") !== -1 || fileType.indexOf("application/vnd.openxmlformats-officedocument.wordprocessingml.document") !== -1) {
        return "document";
    } else {
        return "unknown";
    }
}

二、如何控制表单提交

在前端开发中，我们通常需要对表单的提交进行一定的控制，如是否上传了附件、上传的附件是否符合规定的格式等。下面我们将介绍如何通过JavaScript来实现这一功能。

1. 简单的表单上传，以图片上传为例

当用户在表单中上传图片时，我们可以通过JavaScript来判断上传的文件是否为图片类型，如果不是，则阻止表单提交，并给出错误提示。下面是示例代码：

var fileInput = document.getElementById("fileInput");
var submitButton = document.getElementById("submitButton");
var form = document.getElementById("form");

submitButton.addEventListener("click", function(e) {
    e.preventDefault();
    var file = fileInput.files[0];
    if (file) {
        var fileType = getFileType(file);
        if (fileType !== "image") {
            alert("请上传图片文件");
            return;
        }
        // 如果文件类型符合要求，则可以进行表单提交
        form.submit();
    } else {
        alert("请选择要上传的文件");
    }
});

2. 复杂的表单上传，以带附件的新闻发布为例

当用户在表单中发布新闻时，我们可能需要对附件的上传进行一些控制，如判断文件类型、文件大小等，以确保上传的附件符合要求。下面是示例代码：

var fileInput = document.getElementById("fileInput");
var submitButton = document.getElementById("submitButton");
var form = document.getElementById("form");

submitButton.addEventListener("click", function(e) {
    e.preventDefault();
    var file = fileInput.files[0];
    var fileType = getFileType(file);
    if (fileType === "unknown") {
        alert("不支持该类型的附件上传");
        return;
    }
    if (file.size > 1024 * 1024 * 10) {
        alert("附件大小不能超过10MB");
        return;
    }
    // 如果附件类型和大小都符合要求，则可以进行表单提交
    form.submit();
});

以上就是JavaScript判断文件类型并控制表单提交的详细攻略，希望对您有所帮助。