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

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

考えられる解決策

サーバー側の検証が不可欠であるにもかかわらず、クライアント側で検証を実行するチェックにより、不必要なサーバー リソースの消費を防ぐことができます。 MIME タイプはファイル拡張子に基づいて決定されることがよくありますが、そのアプローチは信頼できない可能性があります。アップロード前に JavaScript を使用して MIME タイプを検証するための 2 段階のプロセスを次に示します。

ステップ 1: ファイル情報の取得

からファイルの詳細を取得します。以下に示す要素:

var control = document.getElementById("your-files");
control.addEventListener("change", function(event) {
    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);

ステップ 2: ファイル ヘッダーの検査

FileReader API を使用してファイルのヘッダーを検査します。

1. 簡単な方法: ファイルから MIME タイプを直接取得しますblob:

   console.log(blob.type);

2. 信頼できる方法: 生ファイルのヘッダー バイトを分析します:

   var fileReader = new FileReader();
   fileReader.onloadend = function(e) {
     // code to obtain file header goes here
   };
   fileReader.readAsArrayBuffer(blob);

ヘッダーを既知の署名と照合して、実際の MIME タイプを決定します。たとえば、JPEG 署名は次のようになります。

case "ffd8ffe0":
case "ffd8ffe1":
case "ffd8ffe2":
    type = "image/jpeg";
    break;

最後に、予想される MIME タイプに基づいてファイルのアップロードを受け入れるか拒否します。

注: 以下のことを認識することが重要です。ファイルの名前が変更された場合でも、この技術を使用してその真の MIME タイプを確立できます。

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