ansaurus

Question

how validate file size using HTML and Javascript on client side

Answer 1

A:

you cannot, javascript is not allowed to tinker with local files

just somebody 2009-12-02 11:50:29

Answer 2

+3 A:

You can do it in firefox like so

html:

<form action="" method="get" accept-charset="utf-8">
<input type="file" name="file" value="" id="file">
<p><input type="submit" value="Continue &rarr;"></p>
</form>

javascript:

var filesize = document.forms[0].file.files[0].fileSize

if there's a way to do this in IE, I don't know it. It probably involves activeX or some other such rubbish.

edit: I found this here, HOW TO DO THIS IN IE

<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>

Breton 2009-12-02 12:02:19

+1 I didn't know that - deleted my post.

Amarghosh 2009-12-02 12:10:51

+1 While this is a good approach (using Javascript which the original question was about), you're really just making a solution for two browsers. Of course, these are two of the most popular browsers, but if you need multiple browser/platform support, it might prove quite difficult to implement.

Sune Rievers 2009-12-02 12:15:33

Javascript cannot be a replacement for checking the filesize on the server. If the goal is simply to save some resources, then that goal is possible, I think.

Breton 2009-12-02 12:19:19

I agree completely Breton, you should always check the file serverside if you REALLY want to be sure. That could for example include checking dimensions of an uploaded image, or to prevent animated gifs to be uploaded (or at least saved).When dealing with clientside code like Javascript, the client can never be 100% trusted.

Sune Rievers 2009-12-02 12:26:54

I didn't know the browser exposed that kind of information. Interesting.

Kaze no Koe 2009-12-02 14:18:43

This answer needs a lot of caveats to be useful in general. 1) IE needs the site to be inserted into the "Trusted Sites" list for this to not error out. If you're going to copy/paste stuff off some other page, do a little research first 2) this was only introduced in FF3 3) and `fileSize` has already been deprecated (https://developer.mozilla.org/en/DOM/File)

Crescent Fresh 2009-12-02 14:39:00

Looks like they deprecated fileSize and replaced it with size, which does exactly the same thing. THen they added type, which gives additional information. As for IE, I don't really know a thing about it, and I think that should have been obvious from my original answer.

Breton 2009-12-02 21:07:06

For IE it is not working!!!!!!!!

NewDev 2009-12-03 04:10:28

oh dear. Well I guess you'll just have to do it for firefox only. I don't know anything about IE so I can't help you with that.

Breton 2009-12-03 05:40:46

Answer 3

+2 A:

Perhaps you could use SWFUpload instead, which is a small Flash application that handles the client side of the upload for you. From their feature list:

Upload multiple files at once by ctrl/shift-selecting in dialog
Javascript callbacks on all events
Get file information before upload starts
Style upload elements with XHTML and css
Display information while files are uploading using HTML
No page reloads necessary
Works on all platforms/browsers that has Flash support.
Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable
Control filesize before upload starts
Only display chosen filetypes in dialog
Queue uploads, remove/add files before starting upload

Sune Rievers 2009-12-02 12:05:28

ansaurus

tags:

views:

answers:

how validate file size using HTML and Javascript on client side

related questions