js 上传文件_js精准判断上传文件类型

前言

一般来说，对于上传的文件，都要做类型过滤，指定哪些类型能上传，哪些不能上传。

最容易想到的，也是相对常用的，是直接使用文件的拓展名。

但拓展名可以手动修改，做不到精准，比如把一个word文档由.doc改为.png

解决方案

将上传文件转为二进制形式后，再获取其前四位头文件的十六进制编码，根据这个就可以精准判定上传文件类型。对于不符合上传格式要求的，直接在客户端做处理。

html代码

这里只做演示，写的比较简单，可根据实际业务场景添加字段

<form id="form">
 <p><input type="file" name="file" multiple id='file'>p>
 <p><input type="button" value="上传" id="btn">p>
form>

js代码

获取dom

let form = document.getElementById('form'); 
let btn = document.getElementById('btn'); 
let f = document.getElementById('file');

获取文件mime类型

更多文件类型可参考 https://blog.csdn.net/weixin_33826268/article/details/94604439

function getFileMimeType(file) {
  const map = {
      'FFD8FFE0': 'jpg',
      '89504E47': 'png',
      '47494638': 'gif',
      "52494646": 'webp'
  }

  const reader = new FileReader();
  reader.readAsArrayBuffer(file);
  return new Promise((resolve, reject) => {
      reader.onload = (event) => {
        try {
            let array = new Uint8Array(event.target.result);
            array = array.slice(0, 4);
            let arr = [...array]
            let key = arr.map(item => item.toString(16)
                .toUpperCase()
                .padStart(2, '0'))
                .join('')
            resolve(map[key])

        } catch (e) {
            reject(e);
        }
      };
  });
}

上传逻辑

btn.onclick = function () {
    if (f.files.length > 1) {
        for (const file of f.files) {
            upload(file)
        }
    } else {
        upload(f.files[0])
    }
}

function upload(file) {
  getFileMimeType(file).then(res => {
    if (res) {
        let fd = new FormData(form);
        let xhr = new XMLHttpRequest();
        xhr.open("post", '/api/uploadFiles');
        xhr.send(fd);
    } else {
        alert('文件格式不符合上传要求')
        f.value = ''
        return
    }

  }).catch(err => {
      console.log(err)
  })
}