jquery - 上传图片导致不显眼的 javascript 验证出现问题

Question

在 MVC 4 视图中，我们有一个输入类型文件作为图像控件。

<input type="file" id="imageUpload"  name = "imagetoupload"  onchange="readURL(this);" accept="*.jpg,*.gif,*.png,*.jpeg"/>

当我们在不选择图像的情况下提交表单时，所有验证（JQuery 和模型）都成功触发。

但是，当我们上传图像并提交表单时，不会触发任何验证。我们尝试通过在提交单击时使用以下代码明确排除图像上传的验证，但没有任何运气。

$("#frmRegister").validate({
        ignore:"input[type='file']"
        });

非常感谢任何帮助。

Answer 1

通过为该错误添加自定义脚本来解决它

function readURL(input) {

        var fileExtension = ['jpeg', 'jpg', 'png'];
        if ($.inArray($(input).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
            alert('@resourceFactory.GetLocalizedValue(PhraseConstants.InvalidFileType)');
            location.reload();
            return false;
        } 

        if (input.files)
        {
            if (input.files[0] && input.files[0].size <= GetFileSize()) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#fileToUpload')
                            .attr('src', e.target.result)
                            .width(90)
                            .height(90);
                };
                reader.readAsDataURL(input.files[0]);
            }
            else {
                alert('@resourceFactory.GetLocalizedValue(ImageSizeExceed)');
            }
        }
    }