使用 javascript 获取 'File' 对象的内容类型

Question

我有两个扩展名相同的文件如下：

1) test_audio_file.mp4（仅包含音频内容）

2) test_video_file.mp4（包括音频和视频内容）

上传文件后，我正在创建上传文件的 File 对象。

我想检查 File 对象的内容类型。即第一个文件 audio/mp4，第二个文件 video/mp4。

当我使用 file_object.type 方法打印文件类型时，在这两种情况下我都得到 video/mp4。

我的假设是第一个文件得到 audio/mp4，第二个文件得到 video/mp4。

我在这里放一行代码：

loadFile: function(file) {
   console.log(file.type);
};

是否有任何方法或方法可以获取第一个文件的内容类型 audio 和第二个文件的内容类型 video。

任何想法都会很棒。谢谢！

Answer 1

你可以试试

input.file.type.match('video.*')

这里描述的很详细

Answer 2

浏览器通常会假定 mime-type 文件扩展名，在这两种情况下都是 mp4。

为了确定，您可以检查文件的二进制内容。

例子

假设您已将文件加载到 ArrayBuffer 中，您可以首先为其创建一个灵活的视图（不能使用 Uint32Array，因为缓冲区的长度必须是 4 字节对齐的，但情况并非总是如此对于文件，DataView 将为您进行 big-endian 到 little-endian 的交换）：

var view = new DataView(buffer);              // buffer = ArrayBuffer

(更新：首先删除了 "unneeded" check/used 我建议在任何情况下都使用的框尺寸。添加了更多详细信息。)

然后，检查 atom（MP4 file-format 使用 "atoms" 和 "boxes" 而不是 "chunks"许多其他类似格式）“ftyp”（0x66747970）字节 4-8（big-endian）：

if (view.getUint32(4) === 0x66747970) {       // = "ftyp"
    // ok, so far so good..
}

现在检查什么 MP4 类型是：

if (view.getUint32(8) === 0x64617368) {       // = "dash"
    // audio
}
else if (view.getUint32(8) === 0x6D703432) {  // = "mp42"
    // audio + video
}

我们现在可以使用适当的 mime-type 设置为音频创建 object-URL：

var blob = new Blob([buffer], {type: "audio/mp4"});
var url = URL.createObjectURL(blob);  // src for video/audio element

注意还有许多其他类型需要考虑（使用十六进制编辑器检查文件的实际值你期望的）并且你可能想要使用带有 indexOf() 的数组来检查多个可能的值：

var videoTypes = [0x6D703432, 0x69736F6D, ...];   // mp42, isom, ...
...
var type = view.getUint32(8);
if (videoTypes.indexOf(type) > -1) { /* ok! */ }

作为后备，您可以假设 video/mp4 用于未知的 headers 和类型，使用 video/mp4 创建一个 blob 作为 mime-type 并让浏览器处理来自那里。

有关偏移量和方框长度的详细信息，请参阅上面的 link。

工作演示

以下演示仅限于检查给定示例文件的类型。您当然需要扩展其他 MP4 类型（类型字段）以签入 real-world 应用程序，例如使用一个数组用于音频类型，一个用于视频等

加载其中一个文件进行分析。

var inp = document.querySelector("input");
inp.onchange = function(e) {
  var reader = new FileReader();
  reader.onload = analyze;
  reader.readAsArrayBuffer(e.target.files[0]);
};

function analyze(e) {
  var buffer = e.target.result, view = new DataView(buffer), blob, url;
  
  // check file type
  if (view.getUint32(4) !== 0x66747970) {                    // = "ftyp"
    alert("Not MP4 file!"); return
  }

  // check if audio or audio+video
  if (view.getUint32(8) === 0x64617368) {                    // = "dash"
    alert("Audio\n(See console for example url)");
    blob = new Blob([buffer], {type: "audio/mp4"});
  }
  else if (view.getUint32(8) === 0x6D703432 ||               // = "mp42"
           view.getUint32(8) === 0x69736F6D) {               // = "isom"
    alert("Video+Audio\n(See console for example url)");
    blob = new Blob([buffer], {type: "video/mp4"});
  }
  else {                                                    // assume video/mp4
    alert("Unsupported:\n0x" + (view.getUint32(8)).toString(16));
    blob = new Blob([buffer], {type: "video/mp4"});
  }
  
  // convert blob to an URL that can be used with a video/audio element
  url = (URL || webkitURL).createObjectURL(blob);
  console.log("Copy and paste this into a tab, wo/quotes:", url);
}

Pick a MP4 file: <input type="file">

使用 javascript 获取 'File' 对象的内容类型

Get content type of 'File' object using javascript

javascript

jquery

content-type

file

object

例子

工作演示