提交表格前验证文件扩展名和大小 [英] Validate file extension and size before submitting form

问题描述

我正在使用jQuery validate插件，并且想要在提交表单之前先验证文件扩展名和文件大小.

I am using jQuery validate plugin, and want to validate file extension and file size before submitting a form.

"use strict";
$('#update_profile').validate({
    rules: {
        FirstName: {
            required: true,
            maxlength: 20
        },
        image: {
            required: true,
            extension: "jep | jpeg",
            filesize : 50000,
        }
    }
});

我想要类似于上面的代码.

I want code similar to the above.

推荐答案

您需要编写自定义规则以验证文件大小，而且文件扩展名也必须作为逗号分隔的字符串传递

You need to write a custom rule to validate file size, also the file extensions has to be passed as a comma separated string

$.validator.addMethod('filesize', function (value, element, param) {
    return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0}');

jQuery(function ($) {
    "use strict";
    $('#update_profile').validate({
        rules: {
            FirstName: {
                required: true,
                maxlength: 20
            },
            image: {
                required: true,
                extension: "jpg,jpeg",
                filesize: 5,
            }
        },
    });
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>

<form id="update_profile" method="post" action="">
  <input type="file" name="image" />
  <input type="submit" value="Save" />
</form>

这篇关于提交表格前验证文件扩展名和大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！