更改扩展名后在文件上传之前检查 jQuery 中的 Mime 类型答案

【问题标题】：Check Mime Type in jQuery before file upload after changing the extension更改扩展名后在文件上传之前检查 jQuery 中的 Mime 类型
【发布时间】：2021-12-23 22:42:45
【问题描述】：

我一直在尝试实现在互联网上找到的各种逻辑。但问题是，如果我更改任何文件的扩展名，它会显示好的。我的代码如下：

    'use strict';
  $("#myfiles").on('change',function(){
    
    var files = $('#myfiles').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);
        }
        alert(header);
        var type = 'unknown';
        switch (header) {
          case '89504e47':
            type = 'image/png';
            break;
          case '47494638':
            type = 'image/gif';
            break;
          case 'ffd8ffe0':
          case 'ffd8ffe1':
          case 'ffd8ffe2':
            type = 'image/jpeg';
            break;
          case '25504446':
            type = 'application/pdf';
            break;
        }
        //if(type=='image/jpeg') { alert('Its JPEG/JPG'); } else { alert('Its Not'); }
        //alert(type);

        if (type!=='image/png' && type!=='image/gif' && type!=='image/jpeg' && type!=='application/pdf' ) {
          alert("File Type Not Allowed");
        } else {
          $('#myfile_mydrive').fileupload({
            downloadTemplateId: 'template-download-gallery',
            uploadTemplateId: 'template-upload-gallery',
            paramName: 'files[]',
            url: 'mydrive-upload.php',
            dataType: 'json',
            autoUpload: true,
            maxNumberOfFiles: 10,
            acceptFileTypes: /(\.|\/)(pdf|doc|docx|xls|ppt|zip|gif|jpe?g|png)$/i
          });
          
        } 
      };
      fileReader.readAsArrayBuffer(file);
    }
  });

所以我实现了上面的代码。但是它显示一两次没问题，然后即使显示不支持该文件类型，它也会上传文件。

【问题讨论】：

这能回答你的问题吗？ How to check file MIME type with javascript before upload?
另外，请不要使用不相关的标签。如果您想在浏览器中检查任何内容，PHP 看起来与我无关
@NicoHaase：我已经尝试过链接解决方案。但问题是我写的代码工作了两次，然后它开始允许所有类型的文件
这是什么意思？你试图解决为什么它只能工作两次？期间有哪些变化？
@NicoHaase：我试图从一个函数中调用整个代码。但似乎由于“const”，该功能不起作用。我也尝试了其他代码，但似乎没有任何效果。它工作两次意味着，它检查文件 mime 两次，然后停止检查。就像我正在尝试上传 excel 文件而不是图像文件一样。它将检查前两次并阻止。但在那之后它允许所有类型。

标签： javascript php jquery mime

【解决方案1】：

Atlast 找到了解决方法。如果有人需要在 blueimp jquery 上传中进行 mime 检查

      $('#myfile_mydrive').fileupload({
       add: function(e, data) {
       var uploadErrors = [];
       var control = document.getElementById("myfiles");
       control.addEventListener("change", function(event) {
        var files = event.target.files[0];
        for (var i = 0; i < files.length; i++) {
          console.log("Filename: " + files[i].name);
          console.log("Type: " + files[i].type);
          console.log("Size: " + files[i].size + " bytes");
        }
       }, false);
       var files = event.target.files[0];
       var fileReader = new FileReader();
       fileReader.onload = function(e) {
        var int32View = new Uint8Array(e.target.result);
        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' && header!=='47494638' && header!=='ffd8ffe0' && header!=='ffd8ffe1' && header!=='ffd8ffe2' && header!=='25504446') { // Check for jpg/jpeg/png/gif/pdf
          alert("File Type Mismatch");
          return;
        } else {
          data.submit();
        }        
      };
      fileReader.readAsArrayBuffer(files);
    },
    downloadTemplateId: 'template-download-gallery',
    uploadTemplateId: 'template-upload-gallery',
    paramName: 'files[]',
    url: 'mydrive-upload.php',
    dataType: 'json',
    autoUpload: false,
    maxNumberOfFiles: 10,
    acceptFileTypes: /(\.|\/)(pdf|gif|jpe?g|png)$/i,    
  });

我的代码的 HTML 部分

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

如您所见，我之前遇到的问题是：-

“on”更改未启动“.fileupload”函数。
“mime”检查无法正常工作，因为“mime”结果的值没有被清除。

因此，您可能会看到解决方法是“文件上传”下的“添加”功能

希望能澄清对解决方案的任何疑问。

【讨论】：