输入文件验证答案

【问题标题】：Input file validation输入文件验证
【发布时间】：2014-03-10 07:36:00
【问题描述】：

我正在使用 jquery 验证表单。一切正常，但没有文件上传。这里有一个文件上传按钮，它只接受我使用 Jquery 的图像，如下所示，

$(document).ready(function(){


    $('#create_teacher').validate({
    rules: {
        teacherId: {

        required: true
      },

        teacherName: {
        minlength: 6,
        required: true
      },

        education: {
            required: true,
            minlength: 6
        },

        experience: {
            required: true,
            minlength: 6

        },

        prevdetails:{
            required: true,
            minlength: 6

        },
        email: {
        required: true,
        email: true
      },


        highlight: function(element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function(element) {
            element
            .text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
        }
    }
  });


$('#create_teacher input[type="submit"]').click(function(e){
        e.preventDefault();
        var form = $('#create_teacher');
        var file = $('input[type="file"]', form).val();
        var exts = ['jpg','jpeg','gif','png'];
        var msg = $('.msg', form);
        msg.hide();

        // first check if file field has any value
        if ( file ) {
            // split file name at dot
            var get_ext = file.split('.');
            // reverse name to check extension
            get_ext = get_ext.reverse();

            // check file type is valid as given in 'exts' array
            if ( $.inArray ( get_ext[0].toLowerCase(), exts ) > -1 ){
                msg.show().html( '<strong style="color:#090">Allowed extension!</strong>' );
            } else {
                msg.show().html( '<strong style="color:#f00">Invalid file!</strong>' );
            }
        }else{
            msg.show().html( '<strong style="color:#f00">Select file!</strong>' );
        }
    });

}); // end document.ready

和我的文件选择器如下，

<input type="file"  id="photo" name="photo" />

但这不是验证。请帮帮我。

【问题讨论】：

你能提供更多关于哪里变坏的提示吗？当您在浏览器中使用调试器时，您会在哪里得到意想不到的结果？
我要上传图片文件，这里如果我上传文本文件也是可以的。但我认为点击事件不起作用，因为它也没有显示允许和无效。 .
你不能依赖表单的提交事件。我现在没有可用的 PC，但请尝试在其中设置警报并检查它是否冒泡。
提交是指，要不要改成点击提交？
是的。并听取表单的提交，而不是按钮。

标签： javascript jquery validation

【解决方案1】：

确保您的表单如下所示：

<form action="#" method="post" " enctype="multipart/form-data" class="" onsubmit="return Checkfiles(this);">
// ...
  <input type="file" name="file" id="file">
</form>

查询：

  function Checkfiles(f){
      f = f.elements;
      if(/.*\.(jpg)$/.test(f['file'].value.toLowerCase()))
        return true;
      alert('Please Upload Jpg Files Only.');
       f['file'].focus();
       return false;
};

【讨论】：

我没有enctype，是什么，不需要id？
@user3377978 是的，你需要它，它允许将文件包含在数据中
据我所知，这只会影响数据发送到服务器的格式。我认为它对客户端没有任何影响。
@PatrickHofman 是的，在客户端它没有影响，但在未来的使用中你将需要这个 enctype
@Gtopuria 如果我添加 enctype 验证不起作用。表示提交不起作用。

【解决方案2】：

jQuery Validate 实际上直接支持这一点，通过additional-methods.js，使用accept 规则。

你要做的就是在你的页面中包含那个 .js 文件，然后向你的规则对象添加一个规则，如下所示：

photo:{
    accept:'image/*'
}

这将允许所有图像 mimetypes。

【讨论】：