使用 jQuery 表单验证远程方法验证上传的文件大小

Question

我想按如下方式进行文件大小验证。请看看这个提议方法是否有意义。这部分应该可以工作。

1> After the user selects a file, I check whether the file has suffix as png, gif etc.
$("#myform").validate({
 rules: {
   fieldForUpload: {
     required: true,
     accept: "png|gif"
   }
 }
});

2> 然后我想使用aJax 方法将文件上传到服务器进行验证，甚至在用户单击提交按钮之前。 http://docs.jquery.com/Plugins/Validation/Methods/remote#url

$("#myform").validate({
  rules: {
    fieldForUpload: {
      required: true,
      accept: "png|gif"
      remote: "check-filesize.php"
    }
  }
});

这是我的问题：

1> 这种方法有效吗？ 换句话说，我可以用“accept”+“remote”一起验证 fieldUpload 吗？

2>我可以强制先验证“接受”，然后验证“远程”吗？

3> 如何实现这种“远程”方法？ 仅供参考：我知道如何使用远程验证数据库中是否存在电子邮件。 为了达到这个目的，我是否必须获得一些不同的知识？

非常感谢

Answer 1

如果你想使用 jQuery 的 validate 你可以通过创建这个方法：

$.validator.addMethod('filesize', function(value, element, param) {
    // param = size (en bytes) 
    // element = element to validate (<input>)
    // value = value of the element (file name)
    return this.optional(element) || (element.files[0].size <= param) 
});

你会使用它：

$('#formid').validate({
    rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576  }
    messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
});

Answer 2

您是否考虑过使用文件上传小部件？正常的表单验证需要访问表单字段。在大多数浏览器中，实际操作文件上传输入字段是不可能的。

查看 Plupload 和 SWFUpload，这两个基于 Flash 的文件上传小部件允许类型和文件大小限制而无需先将文件发送到服务器。

还有Ajax Upload 和Uploadify，这两个jQuery 插件试图使用现代浏览器功能来做同样的事情。较旧的浏览器可能没有相同级别的支持。