アップロードする前にjavascriptでファイルのMIMEタイプを確認するにはどうすればいいですか？
私は this と this の質問を読みましたが、クライアント側でjavascriptを使ってファイルのMIMEタイプをチェックできることを示唆しているようです。さて、私は本当の検証がまだサーバー側で行われなければならないことを理解しています。サーバーリソースの不要な浪費を避けるために、クライアント側のチェックを実行したいです。
これがクライアント側で実行できるかどうかをテストするために、JPEGテストファイルの拡張子を.pngに変更し、アップロードするファイルを選択しました。ファイルを送信する前に、JavaScriptコンソールを使用してファイルオブジェクトを照会します。
document.getElementsByTagName('input')[0].files[0];
これは私がChrome 28.0で手に入れるものです：
ファイル{webkitRelativePath： ""、lastModifiedDate：2012年10月16日10:00:00 GMT + 0000（UTC）、名前： "test.png"、タイプ： "image/png"、サイズ：500055…}
これはtypeがimage/pngであることを示しています。これは、チェックがMIMEタイプではなくファイル拡張子に基づいて行われていることを示しているようです。私はFirefox 22.0を試しました、そしてそれは私に同じ結果を与えます。しかし W3C仕様 に従って、 MIME Sniffing を実装する必要があります。
現時点では、JavaScriptを使ってMIMEタイプをチェックする方法はありません。それとも私は何かが足りないのですか？
サーバーにアップロードする前に、JavaScriptのFileReaderでファイルのMIMEタイプを簡単に判断できます。私たちはクライアントサイドよりもサーバーサイドのチェックを好むべきだと私は同意しますが、クライアントサイドのチェックはまだ可能です。私はあなたにその方法をお見せし、一番下に実用的なデモを提供します。
お使いのブラウザがFileとBlobの両方をサポートしていることを確認してください。すべての主要なものはすべきです。
if (window.FileReader && window.Blob) {
// All the File APIs are supported.
} else {
// File and Blob are not supported
}
ステップ1：
<input>要素から次のようにFile情報を取得できます（ 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タイプを見つけ出すことができます。
◉クイックメソッド
このパターンを使って、それが表すファイルのMIMEタイプを Blob と単純に尋ねることができます。
var blob = files[i]; // See step 1 above
console.log(blob.type);
画像の場合、MIMEタイプは次のようになります。
画像/ JPEG
image/png
...
警告：MIMEタイプはファイル拡張子から検出され、だまされたり偽装されたりする可能性があります。 .jpgを.pngに名前変更することができ、MIMEタイプはimage/pngとして報告されます。
✓正しいヘッダ検査方法
クライアントサイドのファイルの正当なMIMEタイプを取得するには、さらに一歩進んで、与えられたファイルの最初の数バイトを調べて、いわゆる マジックナンバー と比較します。たとえば、 JPEG には「魔法の数」がいくつかあるため、これは完全に簡単ではありません。これは1991年以来フォーマットが進化してきたためです。最初の2バイトだけをチェックすれば済むかもしれませんが、誤検知を減らすために最低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を迂回しなければなりませんでした）。スニペットを開いて実行すると、種類の異なる3つのリモート画像が表示されるはずです。一番上では、ローカル画像またはデータファイルを選択でき、ファイルの署名や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/>他の答えで述べたように、あなたはファイルの最初のバイトでファイルの シグネチャ をチェックすることによってMIMEタイプをチェックすることができます。
しかし、他の答えがしているのは署名をチェックするためにファイル全体をメモリにロードすることです。誤って大きなファイルを選択してください。
/**
* Load the mime type based on the signature of the first bytes of the file
* @param {File} file A instance of File
* @param {Function} callback Callback with the result
* @author Victor www.vitim.us
* @date 2017-03-23
*/
function loadMime(file, callback) {
//List of known mimes
var mimes = [
{
mime: 'image/jpeg',
pattern: [0xFF, 0xD8, 0xFF],
mask: [0xFF, 0xFF, 0xFF],
},
{
mime: 'image/png',
pattern: [0x89, 0x50, 0x4E, 0x47],
mask: [0xFF, 0xFF, 0xFF, 0xFF],
}
// you can expand this list @see https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern
];
function check(bytes, mime) {
for (var i = 0, l = mime.mask.length; i < l; ++i) {
if ((bytes[i] & mime.mask[i]) - mime.pattern[i] !== 0) {
return false;
}
}
return true;
}
var blob = file.slice(0, 4); //read the first 4 bytes of the file
var reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.readyState === FileReader.DONE) {
var bytes = new Uint8Array(e.target.result);
for (var i=0, l = mimes.length; i<l; ++i) {
if (check(bytes, mimes[i])) return callback("Mime: " + mimes[i].mime + " <br> Browser:" + file.type);
}
return callback("Mime: unknown <br> Browser:" + file.type);
}
};
reader.readAsArrayBuffer(blob);
}
//when selecting a file on the input
fileInput.onchange = function() {
loadMime(fileInput.files[0], function(mime) {
//print the output to the screen
output.innerHTML = mime;
});
};<input type="file" id="fileInput">
<div id="output"></div>アップロードしたファイルが画像であるかどうかを確認したいだけであれば、それを<img>タグにロードしてエラーコールバックを確認してください。
例：
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;
}
これはあなたがしなければならないことです
var fileVariable =document.getElementsById('fileId').files[0];
画像ファイルの種類を確認したい場合は
if(fileVariable.type.match('image.*'))
{
alert('its an image');
}
Drakeが述べているように、これはFileReaderで行うことができます。しかし、ここで紹介するのは機能的なバージョンです。 JavaScriptでこれを行うことの大きな問題は、入力ファイルをリセットすることです。まあ、これはJPGだけに制限します（他のフォーマットでは mime type と magic number を変更する必要があります）
<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>
これはFirefoxおよびChromeの最新バージョンとIExplore 10でテストされていることを考慮してください。
これを自分で実装したくないという人のために、Sindresorhusはブラウザで動作するユーティリティを作成し、あなたが望むことができるほとんどのドキュメントのためのヘッダーとMIMEのマッピングを持っています。
https://github.com/sindresorhus/file-type
このユーティリティを使用して、すべてをメモリにロードしないようにするために、Vitim.usの最初のXバイトのみを読み込むという提案を組み合わせることができます（es6の例）。
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(bytes);
// ext is the desired extension and mime is the mimetype
};
reader.readAsArrayBuffer(blob);
簡単な答えはノーです。
お気づきのとおり、ブラウザはファイル拡張子からtypeを派生させています。 Macのプレビューもこの拡張機能からはみ出しているようだ。これは、ディスク上のファイルを調べて読み取るのではなく、ポインターに含まれているファイル名を読み取る方が速いからだと思います。
私はpngで改名されたjpgのコピーを作りました。
私は一貫してクロムで両方の画像から以下を得ることができました（現代のブラウザでは動くはずです）。
ÿØÿàJFIFÿþ;CREATOR: Gd-jpeg v1.0 (using IJG JPEG v62), quality = 90
これはString.indexOf（ 'jpeg'）で画像タイプをチェックするハックアウトの可能性があります。
これが探求するためのフィドルです http://jsfiddle.net/bamboo/jkZ2v/1/
例でコメントするのを忘れた曖昧な行
console.log( /^(.*)$/m.exec(window.atob( image.src.split(',')[1] )) );
- 画像上に残して、base64でエンコードされたimgデータを分割します
- Base64は画像をデコードします
- 画像データの1行目のみに一致
フィドルコードは、IE9では動作しないbase64デコードを使用しています。VB http：//で動作するIEスクリプトを使用した素敵な例を見つけました。 blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html
画像をロードするためのコードはJoel Vardyから取られました、Joel Vardyはアップロードの前にクライアント側でサイズ変更をするクールな画像キャンバスをやっています。これは興味深いものです 画像アップロード
以下はRoberto14の答えを拡張したものです。
これは唯一の画像を許可します
FileReaderが利用可能かどうかをチェックし、利用可能でない場合は拡張子チェックにフォールバックします。
画像でない場合はエラーアラートを出します
画像の場合はプレビューを読み込みます
**あなたはまだサーバー側の検証をするべきです、これは何よりもエンドユーザーにとってより便利です。しかしそれは便利です！
<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>