文件输入字段验证

Question

我试过了，还是不行。

我想做以下事情：

点击提交按钮时，profilePic 应该被验证。 profilePic 不能为空，并且只能接受其中一个

gif|png|jpg|jpeg|pjpeg

文件。

我还想添加最大上传大小。

 $("#basicprofile").bind("submit", function() {
            $("#profilePic").validate({
                rules: {
                    field: {
                        required: true,
                        accept: "gif|png|jpg|jpeg|pjpeg"
                    }
                }
            });
        });


 <s:form action="basicprofile" method="post" enctype="multipart/form-data" 
  id="basicprofile">
       <s:file name="profilePic"  id="profilePic" label="Profile Picture" />
       <s:submit />
 </s:form>

Answer 1

$(document).ready(function() {

    $("#basicprofile").validate({
        rules: {
            profilePic: {
                required: true,
                accept: "gif|png|jpg|jpeg|pjpeg"                
            }
        },

        messages: {
            profilePic: {
                required: "Empty file",
                accept: "Wrong format!!"
            }                  
        },

        errorPlacement: function(error, element) {
            $("#error-messages").html(error); // error container
        }

    });

});

您可以在浏览器中检查该字段是否已填充并且文件格式是否正确，但检查文件大小是一个难题。您必须使用 AJAX，并使用浏览器在 POST 请求中发送到服务器的文件大小标头。

Yahoo 的 UI 库有一个工具可以帮助解决这个问题。 YUI 上传器

示例（不检查文件大小）：http://jsfiddle.net/burlak/U36JS/

Answer 2

您必须验证表单，而不是字段。我相信它必须是这样的：

$("#basicprofile").validate({
    rules: {
        profilePic: {
            required: true,
            accept: "gif|png|jpg|jpeg|pjpeg"
        }
    }
});