file Upload Verifier - jQuery/Javascript

Question

Hiee,
I want to design a frontend of an Uploader page so that
only JPG file can be selected
Max file size should be 1mb

I want to do this check in JavaScript [not in PHP or so ...], can anyone help me ?

[I've no code to show]

You'll have to check on your server too, because you can't prevent somebody from simply POSTing to your URL. — Pointy, Jun 11 '11 at 15:06
http://stackoverflow.com/questions/4112575/client-checking-file-size-using-html5 — zod, Jun 11 '11 at 15:09

score 1 · Answer 1 · answered Jun 11 '11 at 15:02

It's unfriendly to users to insist firmly that filenames must indicate file type, but if you disagree with me you can check the filename on your <input> element. Checking actual file content and size is harder, and will require either Flash or new HTML5 features.

(The file name, stripped of any other path information and possibly even disguised with bogus path information, is available as the <input> element's "value" attribute.)

score 1 · Answer 2 · answered Jun 11 '11 at 15:03

You may check the extensions (which does not check mime type!)

with something like this:

var el = document.getElementById('filename');
var fileName = el.value;
//do some regex magic to validate for /jpg\z/i

Also: You will also HAVE to check on the server. There's nothing stopping anyone with javascript disabled to upload .exe or other creepy large files.

For the rest I don't think there are many currently backwards compatible solutions for javascript. If you really want to do it client side, you might want to look into flash - since it has more permissions to check it. (Still you need to validate on the server side)

Another solution might be the html5 file api: http://www.w3.org/TR/FileAPI/#dfn-file

examples with firefox >3.6: https://developer.mozilla.org/en/using_files_from_web_applications (Still you need to validate on the server)

score 1 · Answer 3 · answered Jun 11 '11 at 15:04

1

i think u can use pluploader for your page.that can be handle your requirement very well.this is the link.http://www.plupload.com/example_queuewidget.php

answered Jun 11 '11 at 15:04

jeewiya

571
11
24

This also relies on flash, silverlight or html5 – Arend Jun 11 '11 at 15:07
@Arend it doesnot rely on flash, silverlight or html5. it will auto detect whats available or fallback to HTML4 – pahan Jul 01 '11 at 11:51

score 1 · Accepted Answer · answered Jun 11 '11 at 15:06

Javascript solution i found. If you want jquery only. convert it to jquery :-)

<html>
<head>
<script>
function getSize()
{
    var myFSO = new ActiveXObject("Scripting.FileSystemObject");
    var filepath = document.upload.file.value;
    var thefile = myFSO.getFile(filepath);
    var size = thefile.size;
    alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>

file Upload Verifier - jQuery/Javascript

4 Answers4