Is there any way to check file size before uploading it using javascript.
A:
NO, but in IE you could do it with an ActiveX script.
possible duplicate: http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation/3717811#3717811
Tim
2010-09-15 13:01:08
Forget ActiveX. You don't want to be browser (and client configuration!) dependent. As of now, MSIE will generate scary warnings whenever you try to execute that.
BalusC
2010-09-15 13:05:38
I agree, but is the only possible solution in IE. (And ofcourse the HTML 5 solution)
Tim
2010-09-15 14:15:06
A:
at the moment: no - but i don't know if there will be such a possibility in the future (with HTML5 or some other crazy stuff)
oezi
2010-09-15 13:01:55
Yes, there is: http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation/3717847#3717847 :-)
T.J. Crowder
2010-09-15 13:07:12
A:
Well it is not possible to check size of a file using javascript. You will need to check it in server side script . However with ActiveXObject you can check size of a file . But this works only with IE and not with other browsers.
Yogesh
2010-09-15 13:02:18
*"However with ActiveXObject you can check size of a file . But this works only with IE..."* **And** triggers security warnings.
T.J. Crowder
2010-09-15 13:06:37
+4
A:
No, you would have to use a Flash-based uploader like SWFUpload or Uploadify to do this.
The SWFUpload Features Demo shows how the file_size_limit setting works.
Note that this (obviously) needs Flash, plus the way it works is a bit different from normal upload forms.
Pekka
2010-09-15 13:03:42
+1
A:
Yes, there's a new feature from the W3C that's supported by some modern browsers, the File API. It can be used for this purpose, and it's easy to test whether it's supported and fall back (if necessary) to another mechanism if it isn't.
Here's a complete example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function showFileSize() {
var input, file;
if (typeof window.FileReader !== 'function') {
bodyAppend("p", "The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('fileinput');
if (!input) {
bodyAppend("p", "Um, couldn't find the fileinput element.");
}
else if (!input.files) {
bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
bodyAppend("p", "Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
}
}
function bodyAppend(tagName, innerHTML) {
var elm;
elm = document.createElement(tagName);
elm.innerHTML = innerHTML;
document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html>
And here it is in action: http://jsbin.com/ificu4 Try that with a recent version of Chrome or Firefox.
Slightly off-topic, but: Note that client-side validation is no substitute for server-side validation. Client-side validation is purely to make it possible to provide a nicer user experience. For instance, if you don't allow uploading a file more than 5MB, you could use client-side validation to check that the file the user has chosen isn't more than 5MB in size and give them a nice friendly message if it is (so they don't spend all that time uploading only to get the result thrown away at the server), but you must also enforce that limit at the server, as all client-side limits (and other validations) can be circumvented.
T.J. Crowder
2010-09-15 13:05:56