Is it possible to validate the size of multipart form on the client side using jQuery?

开发者_运维知识库

Is it possible to use jQuery to make sure that the multipart form data that is submitted by a form does not exceed a given size?

---

Sorry, the standard HTML file input is quite limited. File size is one of the properties you can't get.

Typically, web sites that requires the user to upload a) Big files or b) Many files will take advantage of some code written in Flash or Silverlight, because these framworks can access the file system, read file info and expose to javascript. You can, if set up right, prevent the user from uploading large files (or a large number of files).

At work, we use the Fancyupload project: http://digitarald.de/project/fancyupload/3-0/showcase/photoqueue/

jQuery related, I find this plugin interesting: http://blogs.bigfish.tv/adam/2009/06/14/swfupload-jquery-plugin/

---

An hellish solution is to build up the request yourself and send it by AJAX. You'll face many problems doing so and I definitively think you shouln't do it. But it's an option.

---

If you want to use jQuery's validate you can by creating this method:

$.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) 
});

You would use it:

$('#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" }
});