<!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://cdn.bootcdn.net/ajax/libs/jquery/1.7.1/jquery.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>
JS判断input上传图片的真实类型（非后缀判断）
猜你喜欢
转载自blog.csdn.net/qq_41887214/article/details/125917766
今日推荐
周排行