Validate file upload with javascript/jquery [duplicate]

Question

Ok, this is frustrating. I have searched a lot on google on how to validate selected file (to upload) extension and size but no success on the file size matter. I have an image upload control in asp.net (meant to upload images) but the extension and file size is validated on the server. That's how it works. What if the user submits a 1GB file that is a movie renamed to .jpg?

Somehow Twitter for example managed to validate the input file on client side, both extensions and file size. Anyone got any ideas how to do that before submitting to the server?

Thanks!

LE: No, no HTML5. It's not supported in all browsers. I need a solution to work in IE 7 and 8 also!

Looks like you didn't look very hard here either. stackoverflow.com/questions/4112575/… — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Mar 15, 2013 at 18:41
This is a bit too easy: google.com/search?q=jquery+file+upload+validation ... I use github.com/valums/file-uploader for async uploads, but you could just use the validation bits if you like — BLSully
– BLSully, Commented Mar 15, 2013 at 18:41

Musa · Accepted Answer · 2013-03-15 18:41:57Z

3

If the user browser supports the html5 fileapi, you can read a file size from the file input.

document.getElementById('file').files[0].size  //size of file in bytes
document.getElementById('file').files[0].name  //name of file
document.getElementById('file').files[0].type  //mime type

answered Mar 15, 2013 at 18:41

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

osmiumbin Over a year ago

Thanks for answering, but correct me if i'm wrong, html5 is not supported in all modern browsers. IE 7 and 8 , probably event 9 doesn't support it? I need a method to work on those too.

Musa Over a year ago

You say modern browsers but you call IE7 and 8(and 9)? If you want this to work in all these browsers which I don't think is a good idea, you may have to look into browser specific solutions, like ActiveXObject in IE or even dum dum dum Flash.

Adam Coulombe · Accepted Answer · 2013-03-15 18:57:16Z

0

The HTML5 api, as pointed out by Musa, would probably filter out the majority of cases.

There are proprietary ActiveX methods that may do this too, but support is a bit of an unknown.

Flash can do the check for you if you insist on no html5, you could look in to something like swfupload https://code.google.com/p/swfupload/

answered Mar 15, 2013 at 18:57

Adam Coulombe

1,4851 gold badge12 silver badges12 bronze badges

Collectives™ on Stack Overflow

Validate file upload with javascript/jquery [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related