您可以使用JavaScript轻松确定文件的MIME类型，FileReader然后再将其上传到服务器。我同意我们应该优先于服务器端检查而不是客户端检查，但是仍然可以进行客户端检查。在底部，我将向您展示如何进行演示。
检查您的浏览器是否同时支持File和Blob。所有主要的都应该。
if (window.FileReader && window.Blob) {
// All the File APIs are supported.
} else {
// File and Blob are not supported
}
第1步：
您可以File从这样的<input>元素（ref）中检索信息：
<input type="file" id="your-files" multiple>
<script>
var control = document.getElementById("your-files");
control.addEventListener("change", function(event) {
// When the control has changed, there are new files
var files = control.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>
这是上述（ref）的拖放版本：
<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>
第2步：
现在，我们可以检查文件并挑出标题和MIME类型。
method快速方法
您可以使用此模式天真地向Blob询问它代表的任何文件的MIME类型：
var blob = files[i]; // See step 1 above
console.log(blob.type);
对于图像，MIME类型返回如下：
图片/ jpeg
图片/ png
...
注意：从文件扩展名中检测到MIME类型，并且可以对其进行欺骗或欺骗。可以将a重命名.jpg为a .png，MIME类型将报告为image/png。
✓正确的标头检查方法
为了获得客户端文件的真实MIME类型，我们可以更进一步，检查给定文件的前几个字节，以与所谓的幻数进行比较。请注意，这并不完全简单，因为例如JPEG有一些“魔术数字”。这是因为格式自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类型（此处和此处有更多文件签名）：
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;
}
根据期望的MIME类型，根据需要接受或拒绝文件上传。
演示版
这是一个用于本地文件和远程文件的有效演示（我仅为此演示绕过了CORS）。打开代码片段，运行它，您应该看到显示了三个不同类型的远程图像。在顶部，您可以选择本地图像或数据文件，然后将显示文件签名和/或MIME类型。
请注意，即使图像已重命名，也可以确定其真实的MIME类型。见下文。
屏幕截图
// Return the first few bytes of the file as a hex string
function getBLOBFileHeader(url, blob, callback) {
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);
}
callback(url, header);
};
fileReader.readAsArrayBuffer(blob);
}
function getRemoteFileHeader(url, callback) {
var xhr = new XMLHttpRequest();
// Bypass CORS for this demo - naughty, Drakes
xhr.open('GET', '//cors-anywhere.herokuapp.com/' + url);
xhr.responseType = "blob";
xhr.onload = function() {
callback(url, xhr.response);
};
xhr.onerror = function() {
alert('A network error occurred!');
};
xhr.send();
}
function headerCallback(url, headerString) {
printHeaderInfo(url, headerString);
}
function remoteCallback(url, blob) {
printImage(blob);
getBLOBFileHeader(url, blob, headerCallback);
}
function printImage(blob) {
// Add this image to the document body for proof of GET success
var fr = new FileReader();
fr.onloadend = function() {
$("hr").after($("<img>").attr("src", fr.result))
.after($("<div>").text("Blob MIME type: " + blob.type));
};
fr.readAsDataURL(blob);
}
// Add more from http://en.wikipedia.org/wiki/List_of_file_signatures
function mimeType(headerString) {
switch (headerString) {
case "89504e47":
type = "image/png";
break;
case "47494638":
type = "image/gif";
break;
case "ffd8ffe0":
case "ffd8ffe1":
case "ffd8ffe2":
type = "image/jpeg";
break;
default:
type = "unknown";
break;
}
return type;
}
function printHeaderInfo(url, headerString) {
$("hr").after($("<div>").text("Real MIME type: " + mimeType(headerString)))
.after($("<div>").text("File header: 0x" + headerString))
.after($("<div>").text(url));
}
/* Demo driver code */
var imageURLsArray = ["http://media2.giphy.com/media/8KrhxtEsrdhD2/giphy.gif", "http://upload.wikimedia.org/wikipedia/commons/e/e9/Felis_silvestris_silvestris_small_gradual_decrease_of_quality.png", "http://static.giantbomb.com/uploads/scale_small/0/316/520157-apple_logo_dec07.jpg"];
// Check for FileReader support
if (window.FileReader && window.Blob) {
// Load all the remote images from the urls array
for (var i = 0; i < imageURLsArray.length; i++) {
getRemoteFileHeader(imageURLsArray[i], remoteCallback);
}
/* Handle local files */
$("input").on('change', function(event) {
var file = event.target.files[0];
if (file.size >= 2 * 1024 * 1024) {
alert("File size must be at most 2MB");
return;
}
remoteCallback(escape(file.name), file);
});
} else {
// File and Blob are not supported
$("hr").after( $("<div>").text("It seems your browser doesn't support FileReader") );
} /* Drakes, 2015 */
img {
max-height: 200px
}
div {
height: 26px;
font: Arial;
font-size: 12pt
}
form {
height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<input type="file" />
<div>Choose an image to see its file signature.</div>
</form>
<hr/>
I want to perform a client side checking to avoid unnecessary wastage of server resource.我不明白您为什么说必须在服务器端进行验证，但是又说您要减少服务器资源。黄金法则：永远不要相信用户输入。如果仅在服务器端进行检查，那么在客户端检查MIME类型有什么意义呢？当然这是“不必要地浪费客户资源”吗？