HTML5+；使用文件的前4个字节进行JAVASCRIPT异步表单验证

我不熟悉这种异步，我快疯了。当我完成这篇文章时，我会努力了解更多

我的问题是，我需要在客户端验证表单。我想验证文件是否真的是图像，因为我们可以更改扩展名并通过图像传递它。我正在使用这段代码，但是当然，checkFileType函数是异步的

简而言之：如果文件是图像（png、gif或jpg扩展名），如果它确实是在预览中显示图像和/或显示错误的图像，我希望对其进行验证

我所拥有的代码可能尚未完成，但它如下所示

    $('input[type=file]#imagencabecera').change(function(){
    var file = (this.files[0].name).toString();
    var type = (this.files[0].type).toString();
    var reader = new FileReader();
    console.log(type);

    $('#file-info').text('');
    $('#file-info').text(file);

    reader.onload = function (e){
        $('#filepreview img').attr('src', e.target.result);
    }

    reader.readAsDataURL(this.files[0]);
});

function checkFileType(file){
    if (window.FileReader && window.Blob)
    // All the File APIs are supported. Si soporta HTML5 FileReader y Blob
    {
        var slice = file.slice(0,4);      // Get the first 4 bytes of a file
        var reader = new FileReader();    // Create instance of file reader. It is asynchronous!
        reader.readAsArrayBuffer(slice);  // Read the chunk file and return to blob

        reader.onload = function(e) {
            var buffer = reader.result;          // The result ArrayBuffer
            var view = new DataView(buffer);     // Get access to the result bytes
            var signature = view.getUint32(0, false).toString(16);  // Read 4 bytes, big-endian，return hex string

            switch(signature) // Every file has a unique signature, we can collect them and create a data lib
            {                      
                case "89504e47": file.verified_type = "image/png"; break;
                case "47494638": file.verified_type = "image/gif"; break;
                case "FFd8FFe0": file.verified_type = "image/jpeg"; break;
                case "FFd8FFe1": file.verified_type = "image/jpeg"; break;
                case "FFd8FFe2": file.verified_type = "image/jpeg"; break;                  
                case "FFd8FFe3": file.verified_type = "image/jpeg"; break;
                case "FFd8FFe8": file.verified_type = "image/jpeg"; break;
                default: file.verified_type = 0;
            }
        }

    }
    else
    // File and Blob are not supported
    {

    }
}

感谢您的关注

您可以使用“onchange”事件来完成此操作，请尝试以下操作：

$（文档）.ready（函数（）{
$（'.myinput'）.bind（'change'，function（）{
if（$（this.val（）.split（'.'）.pop（）！=“jpg”）{
$（'.error message'）.text（'不是JPG'）；
$（this）.val（null）；
}
否则{
$（'.error message'）。文本（''）；
}
})
});
另一种方法是使用FileReader对象中的readAsDataURL（）方法，然后可以尝试加载包含FileReader对象结果的图像。如果结果不是图像，则将触发错误事件





您有两个选择：


许诺
回调

承诺（ES6）

这些承诺是在（又称ES6）中引入的，是ECMAScript针对著名的回调地狱提出的解决方案。这些承诺称为具有两个参数的函数：


决心
拒绝

“resolve”函数用于指示数据将由期望承诺的人交付。“拒绝”用于表示流程中的某些内容失败


let chooser=document.getElementById（'chooser'）；
chooser.addEventListener（'change'，checkMime）；
函数getRealMime（文件）{
返回新承诺（（解决、拒绝）=>{
if（window.FileReader&&window.Blob）{
设slice=file.slice（0,4）；
let reader=new FileReader（）；
reader.onload=（）=>{
让buffer=reader.result；
let view=新数据视图（缓冲区）；
让签名=view.getUint32（0，false）.toString（16）；
让mime='unknown'；
交换机（签名）{
案例“89504e47”：
mime=“image/png”；
打破
案件“47494638”：
mime=“image/gif”；
打破
案例“FFd8FFe0”：
mime=“image/jpeg”；
打破
案例“FFd8FFe1”：
mime=“image/jpeg”；
打破
案例“FFd8FFe2”：
mime=“image/jpeg”；
打破
案例“FFd8FFe3”：
mime=“image/jpeg”；
打破
案例“FFd8FFe8”：
mime=“image/jpeg”；
打破
}
解析（mime）；
}
reader.readAsArrayBuffer（切片）；
}否则{
拒绝（新的错误（“美国海军现代化”第二阶段）；
}
});
}
函数检查MIME（e）{
getRealMime（此.files[0]）
。然后（mime=>{
info（`realmime:${mime}`）；
//评估者是有争议的
})
.catch（错误=>{
控制台错误（错误消息）；
});
}
input[type=“file”]{
显示：无；
}
标签{
背景色：#ff0065；
边界半径：3px；
颜色：#fff；
光标：指针；
显示：内联块；
字体系列：“SegoeUI”，“Ubuntu”，无衬线；
字体大小：14px；
高度：35px；
线高：35px；
填充：0 12px；
}

选择文件
您遇到的具体问题是什么？你的问题有点含糊。你可能想看看这个问题。可能会给你一个想法，我有一个问题，我无法获得从开关到输入文件的数据类型。我不知道怎么做。这对扩展名已更改的假文件不起作用。这就是为什么我需要对标题进行处理。这可能会有所帮助：目前motodo可以查看图像的宽度，但不能查看cabercera mime/类型。无论如何，感谢这个方法不会很好地工作，因为我会观看扩展。例如，如果我换了一个mp3，我把扩展名放在jpg上，就可以通过测试。如果我为建议的表单编号执行此操作，问题是我输入的代码缺少检查并通过了错误。但是异步我不知道怎么做你是对的，我编辑了前面的答案以获得更好的解决方案。你还必须在调用readAsArrayBuffer方法之前声明reader.onload回调