ホームページ >ウェブフロントエンド >jsチュートリアル >ファイルをアップロードする前に、JavaScript を使用してファイルの MIME タイプを確認するにはどうすればよいですか?
このデジタル時代では、ファイルのアップロードは Web アプリケーションの基本的な側面となっています。アップロードされたファイルの MIME タイプを検証して、ファイルがサーバーの期待に準拠していることを確認し、不必要なリソースの浪費を避けることが重要です。
最初は懐疑的でしたが、JavaScript を使用すると、クライアント側でファイルの MIME タイプを簡単にチェックできます。この記事では、実用的なデモンストレーションと広く使用されているファイル署名の包括的なリストを備えたハウツーについて詳しく説明します。
技術的な内容に入る前に、まず次のことを行います。基礎を確立します。ファイル API と BLOB API は、JavaScript でのファイル操作に不可欠です。幸いなことに、これらの API は主要なブラウザ間で広くサポートされています。
選択したファイルに関する情報を取得するには、次の入力要素を利用できます。
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"); } });
MIME を決定するには 2 つの方法がありますtype:
var blob = files[i]; // File from Step 1 console.log(blob.type);
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); }); });
JavaScript は、クライアント側でファイルの MIME タイプをチェックする効果的な手段を提供し、サーバー側の検証を補完します。 File API と BLOB API を活用することで、開発者はファイルの MIME タイプを効率的に判断し、Web アプリケーションのセキュリティ、効率、ユーザー エクスペリエンスを強化できます。
以上がファイルをアップロードする前に、JavaScript を使用してファイルの MIME タイプを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。