アップロード前に JavaScript でファイルの MIME タイプを確認する方法?

このデジタル時代では、ファイルのアップロードは Web アプリケーションの基本的な側(cè)面となっています。アップロードされたファイルの MIME タイプを検証して、ファイルがサーバーの期待に準拠していることを確認し、不必要なリソースの浪費を避けることが重要です。

最初は懐疑的でしたが、JavaScript を使用すると、クライアント側(cè)でファイルの MIME タイプを簡単にチェックできます。この記事では、実用的なデモンストレーションと広く使用されているファイル署名の包括的なリストを備えたハウツーについて詳しく説明します。

準備を整える

技術(shù)的な內(nèi)容に入る前に、まず次のことを行います?；A(chǔ)を確立します。ファイル API と BLOB API は、JavaScript でのファイル操作に不可欠です。幸いなことに、これらの API は主要なブラウザ間で広くサポートされています。

ステップ 1: ファイル情報の抽出

選択したファイルに関する情報を取得するには、次の入力要素を利用できます。

var input = document.getElementById("file-input");

input.addEventListener("change", function(e) {
  var files = e.target.files;
  
  // Iterate through the 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");
  }
});

ステップ 2: MIME タイプの決定

MIME を決定するには 2 つの方法がありますtype:

• クイックメソッド: JavaScript Blob オブジェクトは本質(zhì)的に MIME タイプのプロパティを提供します:

var blob = files[i]; // File from Step 1
console.log(blob.type);

• Header検査方法: より信頼性の高いアプローチとして、ファイルを検査できます。 header:

var blob = files[i]; // File from Step 1
var fileReader = new FileReader();

fileReader.onloadend = function(e) {
  var header = "";
  
  // Extract the first four bytes of the file
  var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
  for (var i = 0; i < arr.length; i++) {
    header += arr[i].toString(16);
  }
  
  console.log(header);
};

fileReader.readAsArrayBuffer(blob);

次に、取得したヘッダーを既知のファイル署名と照合して、MIME タイプを決定する必要があります。

共通ファイル署名

MIME タイプが特定されると、事前定義に基づいてファイルのアップロードを承認または拒否できます。

デモ ショーケース

ここで説明した概念を説明するために、実際に動作するデモを次に示します。

// Get file header
function getFileHeader(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(header);
  };
  fileReader.readAsArrayBuffer(blob);
}

// Determine MIME type
function getMimeType(header) {
  switch (header) {
    case "89504e47":
      return "image/png";
    case "47494638":
      return "image/gif";
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
      return "image/jpeg";
    default:
      return "unknown";
  }
}

// Handle file selection
document.getElementById("file-input").addEventListener("change", function(e) {
  var file = e.target.files[0];
  getFileHeader(file, function(header) {
    var mimeType = getMimeType(header);
    console.log("File: " + file.name);
    console.log("MIME Type: " + mimeType);
  });
});

クライアント側(cè)の MIME タイプ チェックの利點

1. サーバー負荷の軽減: 不必要なサーバー要求を排除します。無効なファイル。
2. ユーザー エクスペリエンスの強化: 互換性のないファイルのアップロードによるイライラするエラー メッセージや遅延を防ぎます。
3. 堅牢なファイル検証: ファイルが準拠していることを確認します。サーバーの期待に応え、セキュリティと整合性を最小限に抑えます

結(jié)論

JavaScript は、クライアント側(cè)でファイルの MIME タイプをチェックする効果的な手段を提供し、サーバー側(cè)の検証を補完します。 File API と BLOB API を活用することで、開発者はファイルの MIME タイプを効率的に判斷し、Web アプリケーションのセキュリティ、効率、ユーザー エクスペリエンスを強化できます。

以上がファイルをアップロードする前に、JavaScript を使用してファイルの MIME タイプを確認するにはどうすればよいですか?の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。