js中如何判斷上傳圖片的格式

在JavaScript中，判斷上傳圖片的格式可以通過檢查文件的 MIME 類型、文件擴展名、使用 FileReader 讀取文件頭信息。推薦使用 MIME 類型檢查、文件擴展名檢查。其中，MIME 類型檢查是最準確的方法，它能確保文件的實際內容和類型一致，避免僅靠擴展名檢查的漏洞。

一、MIME 類型檢查

MIME 類型（Multipurpose Internet Mail Extensions）是網絡上標示文件類型和格式的一種標準方式。上傳圖片時，瀏覽器會自動為文件附加一個 MIME 類型，這可以通過 JavaScript 來檢查。

1. 取得文件的 MIME 類型

在 HTML 中，我們通常使用 <input type="file"> 來上傳文件。當用戶選擇文件後，可以通過 JavaScript 來獲取文件對象並檢查其 MIME 類型。

<input type="file" id="fileInput" />
<script>
document.getElementById('fileInput').addEventListener('change', function() {
    var file = this.files[0];
    if (file) {
        var mimeType = file.type;
        if (mimeType.startsWith('image/')) {
            console.log('這是一個圖片文件');
        } else {
            console.log('這不是一個圖片文件');
        }
    }
});
</script>

2. 常見的圖片 MIME 類型

常見的圖片 MIME 類型包括：

image/jpeg
image/png
image/gif
image/bmp
image/webp

3. MIME 類型驗證的優點

MIME 類型檢查相比文件擴展名檢查更加準確，因為文件擴展名僅僅是文件名的一部分，可以被用戶隨意更改，而 MIME 類型則是由文件內容決定的，更加可靠。

二、文件擴展名檢查

雖然 MIME 類型檢查更準確，但在某些情況下，檢查文件的擴展名也可以作為一個輔助手段。這種方法通過檢查文件名的後綴來確定文件類型。

1. 取得文件的擴展名

<input type="file" id="fileInput" />
<script>
document.getElementById('fileInput').addEventListener('change', function() {
    var file = this.files[0];
    if (file) {
        var fileName = file.name;
        var fileExtension = fileName.split('.').pop().toLowerCase();
        var validExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
        if (validExtensions.includes(fileExtension)) {
            console.log('這是一個有效的圖片文件');
        } else {
            console.log('這不是一個有效的圖片文件');
        }
    }
});
</script>

2. 文件擴展名驗證的缺點

文件擴展名檢查不如 MIME 類型檢查準確，因為用戶可以隨意修改文件的擴展名來欺騙檢查。例如，一個惡意的文件可以將其擴展名改為常見的圖片擴展名，從而繞過檢查。

三、使用 FileReader 讀取文件頭信息

FileReader API 允許我們讀取文件的內容，這樣可以檢查文件的實際內容，而不僅僅依賴於 MIME 類型或文件擴展名。

1. 讀取文件頭信息

文件的頭信息（magic numbers）通常包含有關文件類型的標識符。通過讀取文件的頭信息，我們可以更準確地判斷文件類型。

<input type="file" id="fileInput" />
<script>
document.getElementById('fileInput').addEventListener('change', function() {
    var file = this.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onloadend = function() {
            var arr = (new Uint8Array(reader.result)).subarray(0, 4);
            var header = '';
            for (var i = 0; i < arr.length; i++) {
                header += arr[i].toString(16);
            }
            var validImageTypes = ['89504e47', 'ffd8ffe0', 'ffd8ffe1', 'ffd8ffe2', '47494638'];
            if (validImageTypes.includes(header)) {
                console.log('這是一個有效的圖片文件');
            } else {
                console.log('這不是一個有效的圖片文件');
            }
        };
        reader.readAsArrayBuffer(file);
    }
});
</script>

2. 常見圖片文件的頭信息

PNG: 89504e47
JPEG: ffd8ffe0, ffd8ffe1, ffd8ffe2
GIF: 47494638

四、綜合驗證方法

為了確保上傳文件的安全性和準確性，我們可以結合以上方法進行綜合驗證。首先檢查 MIME 類型，其次檢查文件擴展名，最後通過 FileReader 讀取文件頭信息進行最終確認。

<input type="file" id="fileInput" />
<script>
document.getElementById('fileInput').addEventListener('change', function() {
    var file = this.files[0];
    if (file) {
        var mimeType = file.type;
        if (mimeType.startsWith('image/')) {
            var fileName = file.name;
            var fileExtension = fileName.split('.').pop().toLowerCase();
            var validExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
            if (validExtensions.includes(fileExtension)) {
                var reader = new FileReader();
                reader.onloadend = function() {
                    var arr = (new Uint8Array(reader.result)).subarray(0, 4);
                    var header = '';
                    for (var i = 0; i < arr.length; i++) {
                        header += arr[i].toString(16);
                    }
                    var validImageTypes = ['89504e47', 'ffd8ffe0', 'ffd8ffe1', 'ffd8ffe2', '47494638'];
                    if (validImageTypes.includes(header)) {
                        console.log('這是一個有效的圖片文件');
                    } else {
                        console.log('這不是一個有效的圖片文件');
                    }
                };
                reader.readAsArrayBuffer(file);
            } else {
                console.log('這不是一個有效的圖片文件');
            }
        } else {
            console.log('這不是一個圖片文件');
        }
    }
});
</script>

五、結論

通過結合 MIME 類型檢查、文件擴展名檢查、使用 FileReader 讀取文件頭信息，可以更準確地判斷上傳圖片的格式。 這不僅提高了驗證的準確性，也增強了系統的安全性。

六、推薦項目管理系統

在實際的項目開發中，管理和協作是至關重要的。為了提高開發效率，建議使用以下兩個項目管理系統：

研發項目管理系統 PingCode：專為軟件開發團隊設計，提供從需求管理到版本發布的全流程管理支持。
通用項目協作軟件 Worktile：適合各類團隊，支持任務管理、日程安排、文件共享等功能，有助於提升團隊協作效率。

通過這些工具，團隊可以更好地協作和管理項目，從而提高工作效率和產品質量。