如何在上传文件之前使用 JavaScript 检查文件的 MIME 类型？

如何在上传前使用 JavaScript 检查文件 MIME 类型？

在这个数字时代，上传文件已成为 Web 应用程序的基本方面。验证上传文件的 MIME 类型至关重要，以确保它们符合服务器的期望并避免不必要的资源浪费。

尽管最初持怀疑态度，JavaScript 使我们能够轻松地在客户端检查文件 MIME 类型。本文将深入探讨操作方法，并配有实际演示和广泛使用的文件签名的综合列表。

准备工作

在开始讨论技术细节之前，我们首先建立基础。文件和 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 <h3 id="步骤-确定-MIME-类型">步骤 2：确定 MIME 类型</h3><p>有两种方法可以确定 MIME type:</p>

• 快速方法: 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 <p>接下来，我们需要将获取到的 header 与已知的文件签名进行匹配，以确定 MIME 类型。</p><h4 id="常见文件签名">常见文件签名</h4>

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 <h3 id="客户端-MIME-类型检查的好处">客户端 MIME 类型检查的好处</h3><ol>
<li>
<strong>减少服务器负载:</strong> 消除无效的不必要的服务器请求</li>
<li>
<strong>增强的用户体验：</strong>防止因上传不兼容的文件而导致令人沮丧的错误消息和延迟。</li>
<li>
<strong>强大的文件验证：</strong>确保文件遵循服务器期望，最大限度地降低安全性和完整性</li>
</ol><h3 id="结论">结论</h3><p>JavaScript 提供了一种在客户端检查文件 MIME 类型的有效方法，补充了服务器端验证。通过利用 File 和 Blob API，开发人员可以有效地确定文件的 MIME 类型，从而增强 Web 应用程序的安全性、效率和用户体验。</p>

以上是如何在上传文件之前使用 JavaScript 检查文件的 MIME 类型？的详细内容。更多信息请关注PHP中文网其他相关文章！