jQuery File Upload中基于文件头魔术数字的MIME类型验证教程

$('#myfiles').on('change', function() {
  var files = $(this).get(0).files;
  if (files.length > 0) {
    var file = files[0];
    var fileReader = new FileReader();
    fileReader.onloadend = function(e) {
      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);
      }
      // 进行魔术数字检查
      if (header !== '89504e47' /* ... */) {
        alert("文件类型不被允许！");
        // 如何阻止 jQuery-File-Upload 上传？
      } else {
        // 在这里初始化或触发 jQuery-File-Upload
        // 这种方式可能导致 jQuery-File-Upload 无法正确捕获文件或状态不一致
        $('#myfile_mydrive').fileupload({ /* ... */ });
      }
    };
    fileReader.readAsArrayBuffer(file);
  }
});

<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 (event) {
                // 读取文件的前4个字节
                var arr = (new Uint8Array(event.target.result)).subarray(0, 4);
                var header = "";
                for (var i = 0; i < arr.length; i++) {
                    header += arr[i].toString(16).padStart(2, '0'); // 确保两位十六进制表示
                }

                // 定义允许的文件类型魔术数字列表
                var allowedHeaders = [
                    '89504e47', // PNG
                    '47494638', // GIF
                    'ffd8ffe0', 'ffd8ffe1', 'ffd8ffe2', 'ffd8ffe3', // JPEG (常见的JFIF/Exif变体)
                    'ffd8ffdb', 'ffd8ffee', // JPEG 其他变体
                    '25504446'  // PDF
                    // 如需支持其他类型，请在此添加对应的魔术数字
                ];

                // 检查文件头是否在允许的列表中
                if (allowedHeaders.indexOf(header.toLowerCase()) === -1) {
                    alert("文件类型不匹配或不被允许。请上传PNG, GIF, JPEG或PDF文件。");
                    // 阻止文件上传
                    return;
                } else {
                    // 如果验证通过，则提交文件进行上传
                    data.submit();
                }
            };
            // 以 ArrayBuffer 格式读取文件内容
            fileReader.readAsArrayBuffer(file);
        },

        // 其他配置项
        downloadTemplateId: 'template-download-gallery', // 下载模板ID
        uploadTemplateId: 'template-upload-gallery',     // 上传模板ID
        paramName: 'files[]',                            // 上传文件参数名
        url: 'mydrive-upload.php',                       // 服务器上传处理URL
        dataType: 'json',                                // 服务器返回数据类型
        autoUpload: false,                               // **重要：设置为false，以便在验证后手动调用data.submit()**
        maxNumberOfFiles: 10,                            // 最大上传文件数
        // 这里的acceptFileTypes是基于扩展名的初步过滤，不作为最终验证手段
        acceptFileTypes: /(\.|\/)(pdf|gif|jpe?g|png)$/i,
    });
});