javascript - Android 版 Chrome 上的 Html 文件输入缺少扩展名和 mime 类型

Question

在 html/js 中，当您在适用于 Android (5.1.1) 的 Chrome (43) 上选择文件时，生成的文件名缺少扩展名并且文件类型为空字符串。想知道是否有办法获得丢失的信息？如果没有，是否有合理的方法对文件类型进行客户端验证？

请查看下面的示例 fiddle ，并注意我在 Windows 桌面浏览器和 ios safari 上获得了扩展名和 mime 类型。

http://jsfiddle.net/Lfg3xhy4/

$(function(){
    $("#fileInput").on("change", function(e){
        $("#name").html(e.target.files[0].name);
        $("#type").html(e.target.files[0].type);
    });
});

更新 我注意到在使用 android 文档浏览器时，音频选项卡(我用来选择文件)似乎没有提供文件扩展名和 mime 类型。如果我使用任何其他选项卡导航到文件，一切似乎都正常。

Answer 1

通过 android Documents 文件浏览器，某些选项卡不提供文件扩展名和类型。例如，“音频”选项卡(显示音频元数据)和一些已连接的存储帐户。

因此，另一种进行文件类型验证的方法是使用“文件签名”http://www.filesignatures.net/index.php?page=all

本质上，您查看二进制文件的一部分。下面的简化示例。

var audioFile;  //Set from elsewhere
if (FileReader) {
    var reader = new FileReader();
    reader.addEventListener("load", function(e) {
        var mp3FileSignature = [255, 251, 48];
        var id3FileSignature = [73, 68, 51];
        //There are actually quite a few more scenarios to handle for mp3's in particular
        //Most file types are simpler

        var arrayBuffer = e.target.result;

        if (arrayBuffer && arrayBuffer.byteLength >= 3) {
            var slice = arrayBuffer.slice(0, 3);
            var view = new Uint8Array(slice);
            if ((mp3FileSignature[0] != view[0] || mp3FileSignature[1] != view[1] || mp3FileSignature[2] != view[2])  
                && (id3FileSignature[0] != view[0] || id3FileSignature[1] != view[1] || id3FileSignature[2] != view[2])) {

                //Not an mp3
            }
        }

    })
    reader.readAsArrayBuffer(audioFile);
}