アップロードする前に JavaScript でファイルの MIME タイプを確認するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-12-03 11:17:14

オリジナル

576 人が閲覧しました

How Can I Verify a File's MIME Type in JavaScript Before Uploading?

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

JavaScript を使用すると、アップロード前に FileReader を使用してファイルの MIME タイプを確認できます。それをサーバーに送信します。サーバー側のチェックが推奨されますが、クライアント側のチェックもオプションです。

ステップ 1: ファイル情報を取得する

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

// Retrieve file information
var files = document.getElementById("your-files").files;

ログイン後にコピー

ステップ 2: ファイルの MIME タイプを検査する

簡単な方法:

を使用しますMIME を抽出する BLOB type:

console.log(files[i].type);  // Outputs "image/jpeg" or similar

ログイン後にコピー

適切なヘッダー検査方法:

さまざまなファイルタイプに固有の「マジックナンバー」についてファイルヘッダーを分析します:

var blob = files[i];  // File object
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";
        break;
}

ログイン後にコピー

これらの方法を利用すると、ファイルをサーバーにアップロードする前にクライアント側でファイルの MIME タイプを判定でき、不要なサーバーリソースの使用量を削減できます。

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