☰

アップロード前にJavaScriptでファイルのMIMEタイプを確認するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript html file-upload mime-types
アップロード前にJavaScriptでファイルのMIMEタイプを確認するにはどうすればいいですか? 質問する

読みましたこれそしてこれ質問は、ファイルの MIME タイプはクライアント側で JavaScript を使用してチェックできるということを示唆しているようです。実際の検証はサーバー側で行う必要があることがわかりました。サーバー リソースの無駄な浪費を避けるために、クライアント側でチェックを実行したいと思います。

クライアント側でこれが実行できるかどうかをテストするために、JPEGテスト ファイルの拡張子を に変更し.png、アップロードするファイルを選択します。ファイルを送信する前に、JavaScript コンソールを使用してファイル オブジェクトをクエリします。

document.getElementsByTagName('input')[0].files[0];

Chrome 28.0 では次のようになります:

ファイル {webkitRelativePath: "", lastModifiedDate: Tue Oct 16 2012 10:00:00 GMT+0000 (UTC), name: "test.png", type: "image/png", size: 500055…}

タイプはimage/pngMIMEタイプではなくファイル拡張子に基づいてチェックが行われていることを示しています。Firefox 22.0を試してみましたが、同じ結果になりました。しかし、W3C仕様、MIME スニッフィング実装する必要があります。

現時点では JavaScript で MIME タイプを確認する方法はないと言っていいのでしょうか? それとも何か見落としているのでしょうか?

ベストアンサー1

サーバーにアップロードする前に、 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>（参照):

<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>

これは上記のドラッグアンドドロップバージョンです（参照):

<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 タイプを取得します。

var blob = files[i]; // See step 1 above
console.log(blob.type);

画像の場合、MIME タイプは次のように返されます。

画像/jpeg
画像/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/>

おすすめ記事