input文件上传根据请求头判断文件类型

我胖虎不答应！！

已于 2023-06-02 09:54:36 修改

阅读量526

点赞数

分类专栏：记录 JS 前端其他文章标签： javascript 前端

于 2023-05-05 13:55:38 首次发布

本文链接：https://blog.csdn.net/weixin_42508580/article/details/130505307

版权

JS 同时被 3 个专栏收录

39 篇文章 3 订阅

订阅专栏

记录

36 篇文章 0 订阅

订阅专栏

前端其他

30 篇文章 0 订阅

订阅专栏

input框触发上传文件事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传根据请求头判断文件类型</title>
</head>
<body>
    <input type="file" name="myFile" id="file">
    <button onclick="clickBtn()">上传文件按钮</button>
    <script src="index.js"></script>
</body>
</html>

index.js

const allowedType = {
    'FFD8FFE0': 'jpg',
    '89504E47': 'png',
    '47494638': 'gif',
    "52494646": 'webp'
}
// 通过头文件 判断上传文件格式
function fileType(file) {
    const fileReader = new FileReader()
    fileReader.readAsArrayBuffer(file)
    return new Promise((resolve, reject) => {
        fileReader.onload = (e) => {
            try {
                let uint8Array = new Uint8Array(e.target.result).slice(0, 4)
                // let key = [...uint8Array].map(s => s.toString(16).toUpperCase().padStart(2, '0')).join('')
                let key = Array.prototype.map.call(uint8Array, s => s.toString(16).toUpperCase().padStart(2, '0')).join('')
                console.log(key, allowedType[key])
                resolve(typeof allowedType[key] === 'string')
            } catch (error) {
                reject(error)
            }
        }
    })
}

function clickBtn () {
    const fileInput = document.querySelector('#file')
    console.log(fileInput.files)
    fileType(fileInput.files[0]).then(res => {
        console.log(res)
    })
}