How can I check the POST data size before I submit it with jQuery?

Question

I have a web app that allows users to add multiple images, and then upload them, along with other data, all at once when they press a Save button. I'm trying to calculate total size of the POST data before it is sent, so that I can break up the request into multiple ones to avoid hitting PHP's post_max_size or max_file_uploads errors.

Currently, I'm using this code to check only the overall size of the images using the HTML5 File API (size property):

// Calculate size of all files being submitted
var ttlSize = 0;
$('form').find('input[type=file]').each(function() {
    ttlSize += this.files[0].size;
});

if (ttlSize > 4 * 1048576) { // >4MB
    // this will exceed post_max_size PHP setting, now handle...
} else if ($('form').find('input[type=file]').length >= 10) {
    // this will exceed max_file_uploads PHP setting, now handle...
}

I'd like to be more precise by including the rest of the POST data. Is this possible?

Answer 1

You can estimate it by counting the length of your serialized form, excluding file upload fields. So it would be somewhere along these lines:

$("form").not("[type='file']").serialize().length;

Answer 2

for security purposes the access to file upload elements is restricted to the file name. the only way to get access to files on the client machine is with html5 via the new FormData object. have a look here: FormData - Document Object Model. without this objects you can not get the size of the files. otherwise: why not implementing an asynchronous upload?