ファイルをアップロードする前に、JavaScript を使用してファイルの MIME タイプを確認するにはどうすればよいですか?

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

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

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

準備を整える

技術的な内容に入る前に、まず次のことを行います。基礎を確立します。ファイル 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 オブジェクトは本質的に 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 タイプを決定する必要があります。

共通ファイル署名

File Type	Signature (hexadecimal)
PNG	89504e47
GIF	47494638
JPEG	ffd8ffe0, ffd8ffe1, ffd8ffe2

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);
  });
});

クライアント側の MIME タイプ チェックの利点

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

結論

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

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