JS判断input上传图片的真实类型（非后缀判断）

__畫戟__

已于 2024-08-22 16:14:00 修改

阅读量761

点赞数 2

分类专栏： ES6 文章标签： es6 Uint8Array FileReader

于 2022-07-21 17:51:12 首次发布

原文链接：https://blog.youkuaiyun.com/weixin_38152494/article/details/122342556

版权

ES6 专栏收录该内容

4 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>判断图片类型</title>
</head>
<body>
<input type="file" multiple="true" id="upload" />
<br />
<label for="header">header: </label><span id="header"></span>
<br />
<label for="header">realMimeType: </label><span id="realMimeType"></span>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
  function checkRealMimeType(file, callback) {
    let realMimeType
    let reader = new FileReader()
    // running asynchronously!
    reader.onloadend = function () {
      let arr = new Uint8Array(reader.result).subarray(0, 4)
      let header = ''
      for (const item of arr) {
        header += item.toString(16)
      }
      console.log(header)
      // 在这里可以得到上传图片的真实mintype类型
      // 在这里执行你的逻辑，该方法是异步执行
      if (header.indexOf('8950') === 0) {
        realMimeType = 'png'
      } else if (header.indexOf('ffd8') === 0) {
        realMimeType = 'jpeg'
      } else if (header.indexOf('4749') === 0) {
        realMimeType = 'gif'
      } else if (header.indexOf('424d') === 0) {
        realMimeType = 'bmp'
      } else {
        realMimeType = 'unknown'
      }
      console.log(realMimeType)
      $('#header').text(header)
      $('#realMimeType').text(realMimeType)
    }
    reader.readAsArrayBuffer(file)
  }
  $('#upload').on('change', function (e) {
    checkRealMimeType($('#upload')[0].files[0])
  })
</script>
</body>
</html>