JS 获取上传文件大小
我们有时候在上传文件前要判断文件的大小,通常有以下两种方式:
1 <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
2 <html>
3 <body>
4 <INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this)">
5 <INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value)">
6 </body>
7 <script type="text/javascript">
8
9 function getFileSize(filePath)
10 {
11 var image=new Image();
12 image.dynsrc=filePath;
13 alert(image.fileSize);
14 }
15
16 function getFileSize(fileObj)
17 {
18 var image=new Image();
19 image.dynsrc=fileObj.value;
20 var size = image.fileSize || fileObj.files[0].fileSize;
21 if(size > 100000){
22 alert(size);
23 }
24
25 }
26 </script>
27 </html>
2 <html>
3 <body>
4 <INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this)">
5 <INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value)">
6 </body>
7 <script type="text/javascript">
8
9 function getFileSize(filePath)
10 {
11 var image=new Image();
12 image.dynsrc=filePath;
13 alert(image.fileSize);
14 }
15
16 function getFileSize(fileObj)
17 {
18 var image=new Image();
19 image.dynsrc=fileObj.value;
20 var size = image.fileSize || fileObj.files[0].fileSize;
21 if(size > 100000){
22 alert(size);
23 }
24
25 }
26 </script>
27 </html>
但是以上代码有一个问题,就是在给image.dynsrc赋值的时候,要有文件的操作权限,换句话说,IE7之后的版本为了提高安全性不允许浏览器对文件进行操作,故以上代码不实用。
以下代码通过调用ActiveX来进行文件的读取,需要启用ActiveX的部分功能。
代码
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<script type="text/javascript">
function getFileSize(fileObj) {
if (document.all) {
window.oldOnError = window.onerror;
window.onerror = function(err) {
if (err.indexOf('utomation') != -1) {
alert('No access to the file permissions.');
return true;
}
else
return false;
};
var fso = new ActiveXObject('Scripting.FileSystemObject');
var file = fso.GetFile(fileName);
window.onerror = window.oldOnError;
return file.Size;
}
}
</script>
<body>
<INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this)">
</body>
</html>
<html>
<script type="text/javascript">
function getFileSize(fileObj) {
if (document.all) {
window.oldOnError = window.onerror;
window.onerror = function(err) {
if (err.indexOf('utomation') != -1) {
alert('No access to the file permissions.');
return true;
}
else
return false;
};
var fso = new ActiveXObject('Scripting.FileSystemObject');
var file = fso.GetFile(fileName);
window.onerror = window.oldOnError;
return file.Size;
}
}
</script>
<body>
<INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this)">
</body>
</html>
以上为我在开发中的个人经验,欢迎讨论。