How to check file MIME type with JavaScript before upload?

Checking the MIME type of a file before uploading is a crucial step, as it helps ensure that users can only upload files of the required types, which enhances system security and stability. In JavaScript, we can achieve this through the following steps:

Step 1: Listen for File Upload Events

We first need to listen for the change event of the file input element so that when users select files, we can retrieve the information about these files.

javascript
document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files;
    checkMimeType(files);
});

Step 2: Retrieve the File's MIME Type

In this step, we can use the type property of the File object to retrieve the file's MIME type. The File object is obtained from the files collection of the fileInput.

javascript
function checkMimeType(files) {
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const mimeType = file.type;
        console.log("MIME Type:", mimeType);

        if (!isValidMimeType(mimeType)) {
            alert("Unsupported file type: " + mimeType);
            return;
        }
    }
    alert("All file types are valid!");
}

Step 3: Validate the MIME Type

Here, we can define a function isValidMimeType to check if the file's MIME type meets our requirements.

javascript
function isValidMimeType(mimeType) {
    const allowedMimeTypes = ['image/jpeg', 'image/png', 'application/pdf'];
    return allowedMimeTypes.includes(mimeType);
}

Example

The following is a complete example demonstrating how to implement MIME type checking before file upload in HTML:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File MIME Type Check in JavaScript</title>
</head>
<body>
    <input type="file" id="fileInput" multiple>
    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const files = event.target.files;
            checkMimeType(files);
        });

        function checkMimeType(files) {
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const mimeType = file.type;
                console.log("MIME Type:", mimeType);

                if (!isValidMimeType(mimeType)) {
                    alert("Unsupported file type: " + mimeType);
                    return;
                }
            }
            alert("All file types are valid!");
        }

        function isValidMimeType(mimeType) {
            const allowedMimeTypes = ['image/jpeg', 'image/png', 'application/pdf'];
            return allowedMimeTypes.includes(mimeType);
        }
    </script>
</body>
</html>

In this example, we allow uploading JPEG, PNG images, and PDF documents. If users attempt to upload other file types, the system will display a warning and halt processing. This approach effectively prevents users from uploading insecure or unsupported file types.

2024年6月29日 12:07 回复

1个答案

Step 1: Listen for File Upload Events

Step 2: Retrieve the File's MIME Type

Step 3: Validate the MIME Type

Example

你的答案