File uploading is a rather common feature of interactive sites. As all servers come with a limit on the size of the file being uploaded, it would be a usability blessing for users if web developers can implement a logic to check for the file size before uploading, informing the user if the size of the file exceeds the max.
At the server side, it’s easy to weigh the file in bytes, with PHP, ASP or JSP. However it would be waste of resources if one can only check the size of the file that has already been uploaded because there’s no point to it if he is trying to inform the user if the file is too large.
So can this be done on the client side?
Yes, but partially and indecently. JavaScript is built with client safety in mind thus given no clearance to access client file system, falling unable to get the size of any chosen file. VBScript, on the other hand, can return the size of any client file with the help of ActiveX Object, the Microsoft proprietary scripting API.
Consider the code below:
<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>
Rather gross and obselete code with regard to modern front end coding standards, though it does the job. Run it on IE, select a file and click “Size?”, the browser alerts with the size of the file.
file size got by javascript
It’s the only way I know as of now that successfully checks the size of a given file completely on client side.
{ 11 comments… read them below or add one }
no effect on google chrome browser.
ie 7 – requests to run active x object but didnt work might have to tweak a bit
Maybe you should use a swf and pass the file through a flash var and return the filesize through a javascript in the flash element
That’s the way!
It’s Not working i have to upload multiple files.I just add the files in temporary using javascript but it’s Not working it’ll give error ActiveXObject object is not define.
Same err for me too..do u get the result for thi sbug.. if so pls sent the solution to saleem.hbs@gmail.com
This is tough to do with the security restrictions. If anyone has another way that works in FF – Opera and IE without active-x, that would make my day. Checking server side is not only a waste of resources but leaves you open for DOS attack.
Really? dos attacks?
This site is doing it somehow in Firefox and Safari but not in IE and Crome: ajaxbrowser.com
Hi, everyone thanks for leaving comments, but as I stated in the post, this can only be done partially and indecently. It’s impossible to implement a feature like this across all major modern browsers because that’d be a security problem which many other browsers frown upon. JavaScript is not designed to access local computer hard disk in any way so that visitors cannot be hacked by any website.
ActiveXObject is an IE proprietary object that thus far is able to do this. So this trick only works in IE. I’ve just done yet another test and taken the screenshot above. It does work.
ActiveXObject only works in IE… not in mozilla….
upload file even space is there (java script)
example “a.doc” it is working fine but i want to upload file “a .doc “