使用JavaScript獲取“文件”對象的內容類型

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.*')

在這里詳細描述https://stackoverflow.com/a/7412549/3327294

Answer 2

瀏覽器通常會通過文件擴展名來假定為mime類型，在兩種情況下均為mp4。

可以肯定的是，您可以檢查文件的二進制內容。

例

假設您已將文件加載到ArrayBuffer ，則可以首先為其創建一個靈活的視圖（Uint32Array不能使用，因為緩沖區的長度必須對齊4字節，這並不總是文件的情況，DataView會做得很大-endian到little-endian交換）：

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

（ 更新 ：我建議在任何情況下都使用“不需要”的第一個檢查/檢查框的大小。建議添加更多詳細信息。）

然后，檢查原子 （ MP4文件格式使用“ atoms”和“ boxes”而不是“ chunks”，就像許多其他類似格式一樣）“ ftyp ”（0x66747970），字節4-8（大端）：

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了未知的標頭和類型，創建了一個video/mp4作為mime-type的blob，然后讓瀏覽器從那里處理文件。

另請參閱上面的鏈接，以獲取有關偏移量和框長度的詳細信息。

工作演示

以下演示僅限於檢查給定示例文件的類型。 當然，您將需要擴展其他MP4類型（類型字段）以使用諸如音頻類型的一種數組，視頻類型的一種數組等在實際應用中進行檢入。

加載其中一個文件進行分析。

 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">