JQuery验证文件输入

Question

我正在进行自己的自定义验证。目前我有

function doValidation(formData, jqForm, options) {

    var errors = [];

    var fullName = $.trim($("#fullName").val());
    var emailAdd = $.trim($("#emailAdd").val());
    var accountNum = $.trim($("#accountNum").val());

    var fileOne = $.trim($("#fileOne").val());
    var fileTwo = $.trim($("#fileTwo").val());

    if(fullName.length == 0) {
        errors.push("- Please input your Full name as per Passport");
    }

    if(fullName.length > 80) {
        errors.push("- Please input your Full name as per Passport");
    }

    if( !validateEmail(emailAdd)) {
        errors.push("- Your Email address is not in the correct format");
    }

    if(accountNum.length != 14) {
        errors.push("- Your Account number is not valid");
    }


    if (errors.length > 0) {
        $('#validation-results').css('display', 'block');
        $('#validation-results').html(errors.join('<br>'));
        return false;
    }
    return true;
}

如您所见，我有fileOne和fileTwo。这些是文件输入字段。我想要实现一些目标，但我遇到了困难。

如何确保文件属于某种类型和大小？我的文件应小于2MB，其中一个

  

＆＃34; image / bmp，image / jpeg，image / pjpeg，image / png，image / tiff，   应用/ PDF＆＃34;

此外，这两个字段都不是必需的，它可以是一个或另一个（或两者）。有没有办法实现这个目标？通过JQuery验证，我使用了require_from_group。我不能再使用JQuery验证，所以试图复制类似的东西。

任何建议表示赞赏。

由于

Answer 1

简短回答：您无法使用客户端Javascript进行文件大小验证可靠。

**根据用户评论进行编辑 - ** JQuery Validation使用HTML5浏览器中的Files API来支持客户端文件操作。但是，对于各种浏览器，File API的支持并不可靠。有关详细信息，请参阅此link和此link。

按照设计，浏览器中的Javascript在沙箱中运行，实际上无法访问磁盘上的arbritary文件。所以它甚至无法计算它们的大小（需要调用特定于操作系统的API）。

为了检查文件类型 - 基本检查可以是从文件输入中的文件名验证扩展名。但是，这不可靠，通过将扩展名从.ZIP更改为.JPG，不会阻止用户上传ZIP文件而不是图像。

因此，执行此验证的正确位置是服务器 - 它接收上载文件的字节内容，然后执行必要的验证。请注意，如果在服务器上执行这些验证，则无论从哪个用户代理以及文件上载的OS平台，验证逻辑都是相同的。

希望这有帮助

Answer 2

您可以从输入input.files获取表单中的文件，这是一个列表。列表中的对象应该是File的实例，您可以在其中找到客户端文件验证的所有数据：

请查看https://developer.mozilla.org/en-US/docs/Web/API/File了解详情。