上传前如何使用javascript检查文件MIME类型?
我读过一些文章和问题,它们似乎建议可以在客户端使用javascript检查文件MIME类型。现在,我知道真正的验证仍然必须在服务器端完成。我想执行客户端检查,以避免不必要的服务器资源浪费 为了测试是否可以在客户端执行此操作,我将上传前如何使用javascript检查文件MIME类型?,javascript,html,file-upload,mime-types,Javascript,Html,File Upload,Mime Types,我读过一些文章和问题,它们似乎建议可以在客户端使用javascript检查文件MIME类型。现在,我知道真正的验证仍然必须在服务器端完成。我想执行客户端检查,以避免不必要的服务器资源浪费 为了测试是否可以在客户端执行此操作,我将JPEG测试文件的扩展名更改为.png,并选择要上载的文件。在发送文件之前,我使用javascript控制台查询文件对象: document.getElementsByTagName('input')[0].files[0]; 这是我在Chrome 28.0上得到的:
JPEG
测试文件的扩展名更改为.png
,并选择要上载的文件。在发送文件之前,我使用javascript控制台查询文件对象:
document.getElementsByTagName('input')[0].files[0];
这是我在Chrome 28.0上得到的:
文件{webkitRelativePath:”,最后修改日期:2012年10月16日星期二
10:00:00 GMT+0000(UTC),名称:“test.png”,类型:“image/png”,大小:
500055…}
它将类型显示为image/png
,这似乎表明检查是基于文件扩展名而不是MIME类型完成的。我尝试了Firefox22.0,它给了我同样的结果。但根据中国的实际情况,应该实施
我说目前没有办法用javascript检查MIME类型,对吗?还是我遗漏了什么?简短的回答是否定的
正如您所注意到的,浏览器从文件扩展名派生type
。Mac预览版似乎也没有扩展。我假设是这样,因为读取指针中包含的文件名比查找和读取磁盘上的文件更快
我复制了一个用png重命名的jpg
我能够在chrome中从两个图像中一致地获得以下内容(在现代浏览器中应该可以工作)
JFIF;创建者:gd jpeg v1.0(使用IJG jpeg v62),质量=90
你可以从中提取一个字符串。indexOf('jpeg')检查图像类型
这里有一把小提琴要探索
我在示例中忘记注释的含糊不清的行
console.log(/^(.*)$/m.exec(window.atob(image.src.split(',')[1]))代码>
- 分割base64编码的img数据,保留在图像上
- Base64对图像进行解码
- 仅匹配图像数据的第一行
fiddle代码使用base64解码,这在IE9中不起作用,我确实找到了一个在IE中使用VB脚本的好例子
加载图像的代码取自Joel Vardy,他在上传之前正在对客户端进行一些很酷的图像画布大小调整,这可能会引起人们的兴趣
正如您所注意到的,浏览器从文件扩展名派生type
。Mac预览版似乎也没有扩展。我假设是这样,因为读取指针中包含的文件名比查找和读取磁盘上的文件更快
我复制了一个用png重命名的jpg
我能够在chrome中从两个图像中一致地获得以下内容(在现代浏览器中应该可以工作)
JFIF;创建者:gd jpeg v1.0(使用IJG jpeg v62),质量=90
你可以从中提取一个字符串。indexOf('jpeg')检查图像类型
这里有一把小提琴要探索
我在示例中忘记注释的含糊不清的行
console.log(/^(.*)$/m.exec(window.atob(image.src.split(',')[1]))代码>
- 分割base64编码的img数据,保留在图像上
- Base64对图像进行解码
- 仅匹配图像数据的第一行
fiddle代码使用base64解码,这在IE9中不起作用,我确实找到了一个在IE中使用VB脚本的好例子
加载图像的代码取自Joel Vardy,他正在上传之前对客户端进行一些很酷的图像画布大小调整,这可能会引起您的兴趣在上传到服务器之前,您可以使用JavaScript的FileReader
轻松确定文件MIME类型。我同意我们应该更喜欢服务器端检查而不是客户端检查,但是客户端检查仍然是可能的。我将向您展示如何操作,并在底部提供一个工作演示
检查您的浏览器是否同时支持文件
和Blob
。所有主要的都应该这样做
if (window.FileReader && window.Blob) {
// All the File APIs are supported.
} else {
// File and Blob are not supported
}
步骤1:
您可以从如下()的
元素中检索文件
信息:
对于图像,MIME类型如下所示:
图像/jpeg
图像/png
警告:MIME类型是从文件扩展名检测到的,可以被愚弄或欺骗。可以将.jpg
重命名为.png
,MIME类型将报告为image/png
✓ 正确的收割台检查方法
为了获得客户端文件的真正MIME类型,我们可以进一步检查给定文件的前几个字节,以与所谓的MIME进行比较。请注意,这并不是完全直接的,因为,例如,有一些“神奇的数字”。这是因为该格式自1991年以来不断演变。您可以只检查前两个字节,但我更喜欢至少检查4个字节以减少误报
JPEG文件签名示例(前4个字节):
FF D8 FF E0(SOI+ADD0)
FF D8 FF E1(SOI+ADD1)
FF D8 FF E2(SOI+ADD2)
以下是检索文件头的基本代码:
var blob = files[i]; // See step 1 above
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);
}
console.log(header);
// Check the file signature against known types
};
fileReader.readAsArrayBuffer(blob);
根据预期的MIME类型,根据需要接受或拒绝文件上载
演示
这是一个本地文件和远程文件的工作演示(为了这个演示,我不得不绕过CORS)。打开代码段,运行它,您将看到三个不同类型的远程图像。在顶部,您可以选择本地图像或数据文件,并显示文件签名和/或MIME类型
请注意,即使重命名了图像,也可以确定其真正的MIME类型。见下文
屏幕截图
//以十六进制字符串的形式返回文件的前几个字节
函数getBLOBFileHeader(url、blob、回调){
var fileReader=newfilereader();
<div id="your-files"></div>
<script>
var target = document.getElementById("your-files");
target.addEventListener("dragover", function(event) {
event.preventDefault();
}, false);
target.addEventListener("drop", function(event) {
// Cancel default actions
event.preventDefault();
var files = event.dataTransfer.files,
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);
</script>
var blob = files[i]; // See step 1 above
console.log(blob.type);
var blob = files[i]; // See step 1 above
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);
}
console.log(header);
// Check the file signature against known types
};
fileReader.readAsArrayBuffer(blob);
switch (header) {
case "89504e47":
type = "image/png";
break;
case "47494638":
type = "image/gif";
break;
case "ffd8ffe0":
case "ffd8ffe1":
case "ffd8ffe2":
case "ffd8ffe3":
case "ffd8ffe8":
type = "image/jpeg";
break;
default:
type = "unknown"; // Or you can use the blob.type as fallback
break;
}
<form id="form-id">
<input type="file" id="input-id" accept="image/jpeg"/>
</form>
<script type="text/javascript">
$(function(){
$("#input-id").on('change', function(event) {
var file = event.target.files[0];
if(file.size>=2*1024*1024) {
alert("JPG images of maximum 2MB");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
if(!file.type.match('image/jp.*')) {
alert("only JPG images");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
var fileReader = new FileReader();
fileReader.onload = function(e) {
var int32View = new Uint8Array(e.target.result);
//verify the magic number
// for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
alert("ok!");
} else {
alert("only valid JPG images");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
};
fileReader.readAsArrayBuffer(file);
});
});
</script>
var input = document.getElementsByTagName('input')[0];
var reader = new FileReader();
reader.onload = function (e) {
imageExists(e.target.result, function(exists){
if (exists) {
// Do something with the image file..
} else {
// different file format
}
});
};
reader.readAsDataURL(input.files[0]);
function imageExists(url, callback) {
var img = new Image();
img.onload = function() { callback(true); };
img.onerror = function() { callback(false); };
img.src = url;
}
<form id="myform">
<input type="file" id="myimage" onchange="readURL(this)" />
<img id="preview" src="#" alt="Image Preview" />
</form>
<script>
function readURL(input) {
if (window.FileReader && window.Blob) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.onload = function() {
var preview = document.getElementById('preview');
preview.src = e.target.result;
};
img.onerror = function() {
alert('error');
input.value = '';
};
img.src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
else {
var ext = input.value.split('.');
ext = ext[ext.length-1].toLowerCase();
var arrayExtensions = ['jpg' , 'jpeg', 'png', 'bmp', 'gif'];
if (arrayExtensions.lastIndexOf(ext) == -1) {
alert('error');
input.value = '';
}
else {
var preview = document.getElementById('preview');
preview.setAttribute('alt', 'Browser does not support preview.');
}
}
}
</script>
var fileVariable =document.getElementsById('fileId').files[0];
if(fileVariable.type.match('image.*'))
{
alert('its an image');
}
import fileType from 'file-type'; // or wherever you load the dependency
const blob = file.slice(0, fileType.minimumBytes);
const reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.readyState !== FileReader.DONE) {
return;
}
const bytes = new Uint8Array(e.target.result);
const { ext, mime } = fileType.fromBuffer(bytes);
// ext is the desired extension and mime is the mimetype
};
reader.readAsArrayBuffer(blob);