在jQuery File Upload中实现可靠的文件MIME类型检查

<div id="myfile_mydrive" class="fileupload">
   <div class="fileinput-button btn btn-success btn-sm">
      <i class="fa fa-paperclip"></i>
      <span>浏览文件</span>
      <input type="file" id="myfiles" name="myfiles">
   </div>
   <table role="presentation" class="table table-striped">
     <tbody class="files"></tbody>
   </table>
</div>

$(function () {
    'use strict';

    $('#myfile_mydrive').fileupload({
        // add回调函数在文件被添加到上传队列时触发
        add: function(e, data) {
            var file = data.files[0]; // 获取当前文件
            if (!file) { // 检查文件是否存在
                alert("请选择一个文件。");
                return;
            }

            var fileReader = new FileReader();

            fileReader.onload = function(e) {
                // 读取文件的前4个字节
                var arr = new Uint8Array(e.target.result).subarray(0, 4);
                var header = "";
                for (var i = 0; i < arr.length; i++) {
                    // 将字节转换为十六进制字符串，并确保两位表示
                    header += arr[i].toString(16).padStart(2, '0');
                }

                // 定义允许的文件类型及其对应的魔术数字
                const allowedHeaders = [
                    '89504e47', // PNG
                    '47494638', // GIF
                    'ffd8ffe0', // JPEG (常见的多种变体之一)
                    'ffd8ffe1', // JPEG
                    'ffd8ffe2', // JPEG
                    '25504446'  // PDF
                ];

                // 检查文件头是否匹配允许的类型
                if (allowedHeaders.includes(header)) {
                    // 如果文件类型匹配，则继续上传
                    data.submit();
                } else {
                    // 如果文件类型不匹配，则阻止上传并提示用户
                    alert("文件类型不匹配或不支持，请上传图片（PNG/GIF/JPEG）或PDF文件。");
                    // 可以选择清空文件输入，防止用户尝试再次上传
                    $(e.target).val(''); 
                    return;
                }
            };

            // 以ArrayBuffer形式读取文件内容，用于获取原始字节
            fileReader.readAsArrayBuffer(file);
        },
        // 下载模板ID
        downloadTemplateId: 'template-download-gallery',
        // 上传模板ID
        uploadTemplateId: 'template-upload-gallery',
        // 服务器端接收文件数组的参数名
        paramName: 'files[]',
        // 上传处理脚本的URL
        url: 'mydrive-upload.php',
        // 期望的响应数据类型
        dataType: 'json',
        // 禁用自动上传，以便在add回调中手动控制
        autoUpload: false, 
        // 最大允许上传文件数量
        maxNumberOfFiles: 10,
        // 客户端接受的文件类型正则，作为初步过滤（但不可靠）
        acceptFileTypes: /(\.|\/)(pdf|gif|jpe?g|png)$/i,
    });
});