Question

Possible Duplicate:
Using jQuery, Restricting File Size Before Uploading

Is there a good jquery script or other method that can verify file size and file type before uploading a file to a server? I’ve tried looking all over but never found anything to do something like this.

Answer 1

I’d suggest the following:

$('input:file').change(
    function(e) {
        var files = e.originalEvent.target.files;
        for (var i=0, len=files.length; i<len; i++){
            console.log(files[i].fileName, files[i].type, files[i].fileSize);
        }
    });​

JS Fiddle demo.

As JavaScript can’t remove files from the selected fileList object, you’d have to perform checks against the file attributes and prompt the user to deselect files that would be considered invalid due to file-type or file-size (and, obviously, prevent the form submitting):

$('input:file').change(
    function(e) {
        var files = e.originalEvent.target.files;
        for (var i=0, len=files.length; i<len; i++){
            var n = files[i].name,
                s = files[i].size,
                t = files[i].type;

            if (s > 100) {
                console.log('Please deselect this file: "' + n + '," it\'s larger than the maximum filesize allowed. Sorry!');
            }
        }
    });​

JS Fiddle demo.

(This last code tested and working in Chromium 19 and Firefox 15, both on Ubuntu 11.04.)