首页 > web前端 > js教程 > 上传前如何在 JavaScript 中验证文件的 MIME 类型?

上传前如何在 JavaScript 中验证文件的 MIME 类型?

Mary-Kate Olsen
发布: 2024-12-03 11:17:14
原创
503 人浏览过

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类型:

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板