上传图片导致不显眼的javascript验证问题

时间:2013-08-02 11:22:20

标签: jquery asp.net-mvc razor input unobtrusive-validation

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

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

当我们在没有选择图像的情况下提交表单时,所有验证(包括JQuery和模型)都已成功触发。

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

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

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

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

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)');
            }
        }
    }