Question

很简单，无论如何都要检测源文件是什么文件类型？

上下文：
我有一个HTML5音频元素，根据用户点击的按钮，我想使用JavaScript随机更改该音频元素的来源（请不要使用jQuery解决方案），以便播放不同的歌曲。我有几百个声音文件，所以我真的不想将它们全部转换为一种文件类型我目前有一个方法，通过RNG获取一个随机但总是正确的文件名，但无法知道该文件的文件扩展名（它可能是.ogg，.wav，.m4a或.mp3）。它只是尝试每一个可能的扩展，直到一个工作，但是在错误处理方面遇到了一些问题导致其他问题发生，所以如果你能帮助我在这里找到更好的解决方案，那将会非常棒。谢谢！

Answer 1

// fileInput is an HTML input element: <input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");

// files is a FileList object (similar to NodeList)
var files = fileInput.files;
var file;

// loop trough files
for (var i = 0; i < files.length; i++) {

    // get item
    file = files.item(i);
    //or
    file = files[i];

    alert(file.type);
}

developer.mozilla link

Answer 2

您可以混合使用新的XMLHttpRequest Level 2 API和File API来检查服务器资源的文件类型。

例如，要获取图像的类型：

url = '/favicon.ico';
xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        var file = this.response;
        alert(file.type);
    }
};
xhr.send();

JSFIDDLE demo

如何在JavaScript中检测源文件类型

2 个答案: